个人中心
gpt4 book ai didi

javascript - Angular JS 中多次调用函数

转载 作者：行者123 更新时间：2023-12-02 22:56:05 25 4
gpt4 key购买 nike

考虑以下带有 Angular 脚本的 html 文件:

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<head>
</head>
<body ng-app="TestFirstApp" ng-controller="TestCtrl">

<script>
var app = angular.module('TestFirstApp', []);
app.controller('TestCtrl', function($scope) {
    $scope.amt = 50000;
    $scope.terms = 1;
    $scope.rate= 10;
    $scope.interestamt= function() {
        console.log("New value of amt, terms and rate: "+$scope.amt+ " "+$scope.terms+" "+$scope.rate);
        return ($scope.amt*$scope.rate*$scope.terms)/100;   
    };                  
});
</script>
<div>
<label>Enter Amount</label><input type="number" ng-model="amt"></input>
<br>
<label>Enter Years</label><input type="number" ng-model="terms"></input>
<br>
<label>Enter Rate P.A.</label><input type="number" ng-model="rate"></input>
<br>
<label>The interest amount is : {{ interestamt() }}</label>

</div>
</body>
</html>

当我在浏览器中打开页面并更改输入框中的任何值时，由于绑定(bind)，按照预期计算利息金额并更新标签标记中的值。但是在控制台中，我注意到日志语句得到每次我更改输入框中三个值中的任何一个时，都会打印 3 次，这意味着该函数会被多次调用。谁能解释为什么该函数会被多次调用，而不是在任何值更改时仅调用一次？

最佳答案

这就是 AngularJs 的工作原理。摘要过程在任何 DOM 事件上启动，以检查任何范围值是否已更改。

一般来说，在模板中使用函数是一种不好的做法，因为它们会被多次触发。本文将帮助您了解:

https://medium.com/@piyalidas.gcetts/digest-cycle-in-angularjs-32cf6f6dcd5a

更简洁的方法是在每个输入上使用ng-change，并设置一个带有利息金额的变量:

<input type="number" ng-model="amt" ng-change="interestamt()" />

查看工作演示:DEMO

关于javascript - Angular JS 中多次调用函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57973771/

25 4 0
文章推荐： JavaScript PreventDefault 影响子进程
文章推荐： elasticsearch - ElasticSearch Canvas-下拉菜单不起作用
文章推荐： audio - 在LabView中使用过滤器后如何保存wav文件？
文章推荐： javascript - Jquery 验证所有错误仅显示在一个警报框中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com