Question

当以编程方式更改模型时调用angular的ng-change时出现问题。

$scope.sendMessage = function() {
    $scope.message = "Message sent";
}

$scope.confirmed = true;
$scope.mySelectBox = $scope.selects[1];

<select ng-model="mySelectBox"
        ng-options="item.name for item in selects track by item.name"
        ng-change="sendMessage()">
</select>

以下是代码示例：http://plnkr.co/edit/R4MO86ihMrauHXhpCMxi?p=preview

消息应为null，因为不应调用sendMessage。模型以编程方式更改。

Answer 1

您可以尝试使用ngModelOptions。请参阅此plunker以获取参考http://plnkr.co/edit/BdKx62RW5Ls2Iz1H3VR1?p=preview。

在我的例子中，我使用了ng-model-options="{ updateOn: 'change', debounce: { change: 0 } }"，它似乎有效。它只在我更改选择时运行ngChange中提供的功能。初始化阶段message保持为空。

Answer 2

每次更改模型时都会更改ng-change回调，并将初始设置视为此类更改。您可能想要做的是仅在用户与之交互后运行所需的代码。您可以查看该字段的 $ touch 属性：

<form name="exampleForm" ng-controller="ExampleController">
  <select ng-model="mySelectBox" name="mySelectBox"
          ng-options="item.name for item in selects track by item.name"
          ng-change="sendMessage()">
  </select>
  <p>message = {{message}}</p>
</form>


$scope.sendMessage = function() {
    if ($scope.exampleForm.mySelectBox.$touched) {
        $scope.message = "Message sent";
    }
}

Answer 3

根据文档，你是对的。

https://docs.angularjs.org/api/ng/directive/ngChange

但这似乎是由事件连接顺序引起的错误

绕过它的最好方法 - 使用js handler（onchange）

$scope.$watch("mySelectBox", function(a,b) {
    if (a.name!=b.name) {
       $scope.message = "Message sent! (old="+b.name+', new='+a.name+')';
    }
  });

见plunk http://plnkr.co/edit/2ZbxS1tszppR9SrNqxVB?p=preview

HTH

Answer 4

您正在为控制器中的模型提供价值，因此每当您设置与列表匹配的模型值时，它将调用ng-change：

查看更新的plunker： http://plnkr.co/edit/f3xGmKesLFbzti56WLyH?p=preview

以编程方式更改模型时调用ngChange

4 个答案: