3

经过许多教程后，我正在构建我的第一个适当的 angular.js 应用程序。我遇到了该ngChange指令的问题。每次用户更改下拉列表的值时，我都尝试使用它来调用函数。我发现它在页面加载时多次调用该函数，并且每次选择该选项时也会多次调用该函数。

我已经把这个 jsfiddle放在一起，它展示了我遇到的问题。

我想知道为什么它会表现出这种行为，以及如何实现我想要的结果，即每个选项更改一个函数调用并且不调用change()页面加载。（第二个标准对我的应用程序来说不太重要，但我想知道如何抑制这种行为）。

我已经为那些可能能够立即发现错误的人复制了下面的代码。

HTML

<body ng-app ng-controller="Controller">
<div>
    <h2>Number of changes: {{numOfChanges}}</h2>
    <select ng-change="{{change()}}" ng-model="currentSelection">
    <option ng-repeat="option in options">{{option}}</option>
    </select>
</div>
</body>

JavaScript

Controller = function($scope) {
    $scope.numOfChanges = 0;
    $scope.change = function() {
        $scope.numOfChanges++;
    }
    $scope.options = ["do", "ray", "me", "far", "so", "la", "tee","dah"]
}

我知道这很可能是由于我对角度方法的使用/理解不当。我很感激能解决这个小例子的所有失败的答案。

4

3 回答 3

5

ng-change 中的任何内容都已被 angular 识别，因此您无需将其包装在 {{ }} 中。只会ng-change="change()"做。

将它包裹在大括号中将导致 angular 在页面加载时评估它，并且在它更新视图的任何时候，它都会触发多次。

于 2013-07-22T10:57:27.427 回答
1

DKM 和 jonnyynnoj 的答案已经解释了您必须做什么才能使 ng-change 起作用。

在您的示例中，更改侦听器触发 10 次的原因是“摘要”周期更新了 10 次，然后按照此处的说明中止：http: //docs.angularjs.org/api/ng .$rootScope.Scope# $摘要

$digest() 由 AngularJS 直接调用。以下是解释它的文档的解释：

处理当前范围及其子范围的所有观察者。因为观察者的侦听器可以更改模型，所以 $digest() 会不断调用观察者，直到没有更多的侦听器被触发。这意味着有可能进入无限循环。此函数将抛出“超出最大迭代限制”。如果迭代次数超过 10。

在 javascript 开发人员控制台中，您还可以看到您的示例引发以下错误：错误：已达到 10 个 $digest() 迭代。中止！

于 2013-07-22T11:09:07.307 回答
1

{{ }}从您的ng-change()代码中删除

<select ng-change="change()" ng-model="currentSelection">

{}是在绑定的情况下，因此您正在触发更改事件，因此绑定不存在。

你最好看看这个ngChange文档

更新小提琴

于 2013-07-22T10:58:06.883 回答