Question

我正在使用ng-options来显示带有选项的下拉列表。假设我有三个选项，例如option1，option2，option3。选择默认选项1，现在如果用户选择选项2，则$pristine变为False，如果他从angularjs选择选项1，则再次选择$pristine 39; s的预期/** * @Assert\Regex( * pattern="/(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{7,}/", * message="Uw wachtwoord moet zeven tekens of langer zijn, minimaal één getal bevatten, een hoofletter en een kleine letter. " * ) */ protected $plainPassword;应该是假的但是根据用户他没有改变选项。所以我正在寻找一种方法来检测这种变化

Answer 1

以下是Js fiddle demo

<强> HTML

<div ng-app="myApp">

  <div ng-controller="ctrl">
    <form name="myForm">
      {{myForm.$pristine}}
      <select ng-model='list' ng-options='item.name for item in data'>
      </select>
    </form>
  </div>
</div>

JS代码

  var app = angular.module('myApp', []);

  app.controller('ctrl', function($scope) {
    $scope.data = [{
      id: 1,
      name: 'test'
    }, {
      id: 2,
      name: 'test1'
    }];
    $scope.list = $scope.data[0];
    $scope.$watch('list', function(o, n) {
      if ($scope.list == $scope.data[0])
        $scope.myForm.$pristine = true;
    })
  });

您已在列表模型上添加监视，然后才能实现

Answer 2

这正是ng-change的用途。

用法就像这样（添加$ index来显示另一个选项）：

HTML

<div ng-app="myApp">
    <div ng-controller="listController">
        <form name="myForm">
            <select ng-model="currOption"
                    ng-options='item.name for item in data'
                    ng-change="optionChanged(currOption, $index)">
            </select>
        </form>
    </div>
</div>

控制器

angular.module('myApp')
    .controller('listController', function($scope) {
         $scope.data = [{
             id: 1,
             name: 'option1'
         }, {
             id: 2,
             name: 'option2'
         }, {
             id: 3,
             name: 'option3'
         }];

        $scope.optionChanged(option, index) {
            // option = the selection the user just made.
            // index = the index of the selection in your data. I.E. $scope.data[index]
        };
});

检查下拉状态是否已更改

2 个答案: