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

2019-07-28 23:35:34 阅读：161 来源： 互联网

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

我把this 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"]
}

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

解决方法:

ng-change中的任何内容都已被angular识别,因此您无需将其包装在{{}}中.只需ng-change =“change()”即可.

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

标签：javascript,angularjs,html-select
来源： https://codeday.me/bug/20190728/1566591.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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