2015-12-30 3 views
0

У меня есть 3 раздела полей ввода, разделенных разным заголовком (Laser Pass, The Giggsy, The setup), созданным из массива JSON. Вот как это выглядит: enter image description hereAngularjs проверяет и сравнивает два значения полей ввода

Я хочу, чтобы сравнить два поля SCORE и Попытки и показать сообщение об ошибке, если значение показателя больше, то попытки. Что-то вроде этого:

enter image description here

Но некоторые секции, как, Giggsy имеют различный тип полей ввода и нет необходимости для сравнения/проверки этих полей. Только там, где он имеет SCORE и ATTEMPTS, следует сравнивать.

Когда раздел заполняется Показать сообщение об успешном так: enter image description here

Что я могу сделать, чтобы сделать эти вещи в угловом образом. Вот то, что я сделал до сих пор: PLUNKER

HTML:

<div class="row" ng-repeat="all in options"> 

    <h4> {{ all.name}} </h4> 
    <div class="col-sm-5ths" ng-repeat="measurement in all.measurements"> 
     <div class="form-group no-margin form-oneline"> 
     <label style="width: 100%">{{ measurement.name }}</label> 
     <input ng-model="measurement.value" type="{{ measurement.type }}" min="{{ measurement.min }}" max="{{ measurement.max }}" class="form-control display-inline" required> 
     <label style="width: 100%">{{ measurement.scale }}</label> 
     </div> 
    </div> 
    <span style="color:red;" ng-show="testDataFieldWarning(options.measurements)"> 
     Score can't be larger then Attempts 
    </span> 
    <span style="color:Green;" > 
     Done!! 
    </span> 
    </div> 
    <button type="submit" style="margin-top:50px;" ng-disable="">Submit</button> 

JS

$scope.testDataFieldWarning = function (measurements) { 
    var score = 0 , attempts = 0; 

    angular.forEach(measurements, function(measurement) { 
     if((measurement.name) == 'Score'){ 
     score = measurement.value; 
     } 
     if((measurement.name) == 'Attempts'){ 
     attempts = measurement.value; 
     } 
    }); 
    return attempts < score; 
    } 

    $scope.testDataFieldValidate = function (measurement) { 

     var isInvalid = false; 
     angular.forEach(measurement, function(v) { 
     if(typeof (v.value) == 'undefined'){ 
      isInvalid = true; 
     } 
     }); 

     return (isInvalid); 
    } 

Извините за плохой английский и объяснения.

ответ

1

I forked your plunker и добавлены некоторые дополнительные функции валидирующего ...

function isScoreField(measurements) { 
    if (measurements[1].name === 'Score' && measurements[2].name ==='Attempts') { 
     return true; 
    } else { 
     return false; 
    } 
    } 

    $scope.testDataFieldInvalid = function (measurements) { 
    if (isScoreField(measurements) && parseInt(measurements[2].value) < parseInt(measurements[1].value)) { 
     return true; 
    } else { 
     return false; 
    } 
    }; 

    $scope.testDataFieldsEntered = function (measurements) { 
    if (measurements[1].value && measurements[2].value) { 
     return true; 
    } else { 
     return false; 
    } 
    }; 

... что будет условно показать/скрыть сделанные сообщения/ошибки.

<span style="color:red;" ng-show="testDataFieldInvalid(all.measurements)"> 
    Score can't be larger than Attempts 
</span> 
<span style="color:Green;" ng-show="testDataFieldsEntered(all.measurements) && !testDataFieldInvalid(all.measurements)"> 
    Done!! 
</span> 

Надеюсь, это поможет!

+0

Спасибо за ваш ответ! Но иногда это дает неправильное предупреждение. i.e , если я добавлю 12 баллов и 2 в попытках показать мне сделанные! вместо: Оценка не может быть больше, чем Попытки – Raihan

+1

Правда, это сравнение значений, как если бы они были строками, поэтому вам просто нужно изменить условное выражение на 'parseInt (измерения [2] .value)

+0

Теперь это прекрасно! Большое спасибо – Raihan

Смежные вопросы