11

当以编程方式更改模型时调用 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

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

4

4 回答 4

16

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

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

于 2015-06-15T13:53:09.733 回答
4

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

<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";
    }
}
于 2015-06-15T13:38:09.137 回答
3

根据文档，您是对的。

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

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

最好的解决方法 - 诉诸 js 处理程序（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

高温高压

于 2015-06-15T13:39:52.333 回答
0

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

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

于 2015-06-15T13:35:58.140 回答