Angularjs проверяет и сравнивает два значения поля ввода

0

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

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

Изображение 174551

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

Когда раздел заполнен, покажите сообщение об успешном завершении следующим образом: Изображение 174551

Что я могу сделать, чтобы сделать эти вещи угловатыми. Вот что я сделал до сих пор: 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 ответ

1
Лучший ответ

Я разветкил ваш плункер и добавил некоторые дополнительные функции проверки...

  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
    Спасибо за Ваш ответ! Но иногда это дает неправильное предупреждение. то есть, если я добавлю 12 в счете и 2 в попытках, это покажет мне Готово! вместо: Оценка не может быть больше, чем Попытки
  • 1
    Правда, он сравнивает значения, как если бы они были строками, поэтому вам просто нужно изменить условное parseInt(measurements[2].value) < parseInt(measurements[1].value) на parseInt(measurements[2].value) < parseInt(measurements[1].value) . Я обновил поршень соответственно.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню