Javascript 在Angular JS中多次调用函数_Javascript_Angularjs

Javascript 在Angular JS中多次调用函数

javascript angularjs

Javascript 在Angular JS中多次调用函数,javascript,angularjs,Javascript,Angularjs,考虑以下带有角度脚本的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"> &l

考虑以下带有角度脚本的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>


var app=angular.module（'TestFirstApp'，[]）；
app.controller（'TestCtrl'，函数（$scope）{
$scope.amt=50000；
$scope.terms=1；
$scope.rate=10；
$scope.interestamt=函数（）{
log（“amt、terms和rate的新值：++$scope.amt++++$scope.terms++$scope.rate”）；
返回（$scope.amt*$scope.rate*$scope.terms）/100；
};                  
});
输入金额


输入年份


输入每年的费率。


利息金额为：{{interestamt（）}}

当我在浏览器中打开页面并更改输入框中的任何值时，正如预期的那样，将计算利息金额，并在标签标签中更新该值。但在控制台中，我注意到，每当我更改输入框中的三个值中的任何一个时，日志语句将打印3次，这意味着函数会被多次调用。有人能解释为什么函数被多次调用，而不是在任何值被更改时只调用一次吗？

我不知道为什么被多次调用，但我更改了您的代码并在视图的范围值中声明，然后在控制器内调用函数

$scope.interestamt（），它只运行了一次，我相信使用ng init和您的函数会得到相同的结果，而不是返回在范围（interestamt）中声明值
您也可以在控制器中这样做（请参阅）
其中interestamt（）是：
这是第一个例子
这就是AngularJs的工作原理。摘要进程在任何DOM事件上启动，以检查任何范围值是否已更改
通常，在模板中使用函数是一种不好的做法，因为它们会被多次触发。本文将帮助您了解：

更干净的方法是在每个输入上使用ng change
，并设置一个包含利息金额的变量：
<input type="number" ng-model="amt" ng-change="interestamt()" />




检查工作演示：
    function interestamt() {
      console.log("New value of amt, terms and rate: "+$scope.amt+ " "+$scope.terms+" "+$scope.rate);
      return ($scope.amt*$scope.rate*$scope.terms)/100;   
    };

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