AngularJS: условно установить мин на основе другого поля

0

У меня есть два поля ввода: A select с Yes/No и number input. Если select Нет", number отключен и устанавливается на 0. Но когда select Да", я хотел бы установить его как минимум на 1.

<body ng-app="KnobDemoApp">
  <div ng-controller="knobCtrl as knob">
    <label>Yes/No:</label>
    <select ng-model="knob.yesno" name="yesnoName" ng-options="x for x in yes_no">
        <option value="" disabled>Select One</option>
    </select>
    <br>
    <label>Number:</label>
    <input type="number" ng-model="numyesno" name="numName"
    ng-disabled="knob.yesno != 'Yes'"
    min="if knob.yesno == 'Yes' then 1 else 0"></input>
    <br><br>
    <span> Value: </span>{{knob.yesno}} <br>
    <span> Check: </span>{{knob.yesno != 'Yes'}}
  </div>
</body>
<script>
var app = angular.module('KnobDemoApp', [])
app.controller('knobCtrl', function ($scope) {
  $scope.yes_no = ["Yes", "No"];
});
</script>
Теги:

2 ответа

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

Вы можете использовать ngChange для получения current значения вашего ngModel, тогда вы можете установить свой input на 0, если он эквивалентен "Нет".

angular
  .module('KnobDemoApp', [])
  .controller('knobCtrl', function($scope) {
    $scope.setValue = setValue;
    $scope.yes_no = ["Yes", "No"];

    function setValue() {
      if ($scope.knob.yesno === 'No') {
        $scope.numyesno = 0;
      } else {
        $scope.numyesno = 1
      }
    }
  });
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-app="KnobDemoApp">
  <div ng-controller="knobCtrl as knob">
    <label>Yes/No:</label>
    <select ng-model="knob.yesno"
            name="yesnoName"
            ng-options="x for x in yes_no"
            ng-change="setValue()">
      <option value hidden>Select One</option>
    </select>
    <br>
    <label>Number:</label>
    <input type="number"
           ng-model="numyesno"
           name="numName"
           ng-disabled="knob.yesno !== 'Yes'"
           min="{{knob.yesno === 'Yes' ? 1 : ''}}">
    <br>
    <br>
    <span> Value: </span>{{knob.yesno}}
    <br>
    <span> Check: </span>{{knob.yesno != 'Yes'}}
  </div>
</body>

</html>
Поделиться
  • 0
    Попробуйте выбрать нет и снова да. Номер не меняется на 1.
  • 0
    Оно не должно изменяться на 1, min в input type="number" просто означает: ограничьте число MIN на основе нажатий на стрелки, а не на то, что пользователь вводит . Пожалуйста, прочитайте документы.
Показать ещё 2 комментария
1

Попробуй это:

<input type="number" ng-model="numyesno" name="numName" 
       ng-disabled="knob.yesno == 'No'" 
       min="{{(knob.yesno == 'Yes') ? 1 : 0}}" />
Поделиться
  • 0
    Не работает; по-прежнему позволяет мне устанавливать отрицательные числа на входе
  • 0
    Вы просто пропускаете кудряшки {{knob.yesno == 'Yes' ? 1 : 0}} :)

Ещё вопросы

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