为什么Angular.js使用ng-change来调用我的函数,如何在每次更改时只调用一次?

Jes*_*hua 3 javascript html-select angularjs

经过许多教程后,我正在构建我的第一个正确的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>
Run Code Online (Sandbox Code Playgroud)

JavaScript的

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

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

noj*_*noj 5

ng-change中的任何内容都已被angular识别,因此您无需将其包含在{{}}中.就是ng-change="change()"这样.

将它包装在大括号中将导致角度在页面加载时评估它以及任何时候更新视图,因此它会多次触发.