Javascript 为什么需要在angularjs中创建一个函数来返回相加的数字之和？_Javascript_Angularjs_2 Way Object Databinding

Javascript 为什么需要在angularjs中创建一个函数来返回相加的数字之和？

javascript angularjs

Javascript 为什么需要在angularjs中创建一个函数来返回相加的数字之和？,javascript,angularjs,2-way-object-databinding,Javascript,Angularjs,2 Way Object Databinding,我在应用程序中使用angularjs已经有一段时间了，但突然之间，我对angularjs这种简单的虚幻性质完全迷茫了这是我的代码： <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-con

我在应用程序中使用angularjs已经有一段时间了，但突然之间，我对angularjs这种简单的虚幻性质完全迷茫了

这是我的代码：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

First Number: <input type="number" ng-model="firstNumber"><br>
Last Number: <input type="number" ng-model="secondNumber"><br>
<br>
Sum: {{result()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstNumber = 0 ;
    $scope.secondNumber = 0;
    $scope.result = function() {
        return $scope.firstNumber + $scope.secondNumber;
    };
});
</script>

</body>
</html>

鉴于：

Sum : {{result}}

结果仅显示初始结果，即0，但不显示更改输入数字后的总和

既然结果在范围上下文中，并且它的值在每次用户输入更改时都应该更改，那么为什么总和值没有反映在视图中呢

请帮忙

这是因为您的结果具有不同的数据模型，而且您不必使用函数。您可以使用以下命令来显示总和

First Number: <input type="number" ng-model="firstNumber"><br>
Last Number: <input type="number" ng-model="secondNumber"><br>
<br>
Sum: {{firstNumber + secondNumber}}

第一个号码：

最后一个号码：



总和：{{firstNumber+secondNumber}}

此外{{result（）}}每次数据模型发生更改时都会触发，您可能希望使用$scope.$watch或ng change仅在firstNumber或secondNumber发生更改时计算总和。

显示中的结果将随着在获得连续更新的函数中更新其模型而更改。由于作为控制器初始化的一部分，所有JavaScript语句只执行一次，因此第一次计算结果，视图也是如此。但是当您更改值时，Angular会使用输入字段中的值更新firstNumber和secondNumber的模型，这是因为我们没有告诉它在值更改时做任何事情，就像任何其他编程语言功能一样，JavaScript和Angular都不会重新编译其控制器的所有JavaScript语句，因为它是控制器定义的一部分

下一个问题必须是，当我们写作时会发生什么

{{firstNumber+secondNumber}}，是angularjs，它会继续计算这些模型及其相应视图的值（不是在控制器定义中编写的添加这些数字的JavaScript语句）。

angularjs控制器中的每个函数只能触发一次

第一个技巧是在函数中使用watch

 $scope.result=function(){   
      return $scope.firstNumber + $scope.secondNumber;
   $scope.$watchGroup(['firstNumber ', 'secondNumber'], 
    function(newValues, oldValues, scope) {
    return newValues[0]+newValues[1]
    });
}

第二个技巧是使用ng change for execute for every change

First Number: <input type="number" ng-change="result()" ng-model="firstNumber"><br>
Last Number: <input type="number" ng-change="result()" ng-model="secondNumber"><br>

很好的解释，我非常清楚这个概念，也就是说，在执行{{result}}或控制器$scope.result=$scope.firstNumber+$scope.secondNumber上的代码时没有任何更新机制；不会更新，因此值结果不会更新。调用{result（）}}告诉angular调用函数，然后该函数计算更新输入的总和，每个输入都使用ng模型更新，因此结果会更新。如果我仍然错了，请纠正我。不管怎样，解释得很好，谢谢你，很荣幸。@PrabinUpreti是的。我很高兴能帮上忙。尝试使用其他答案中的示例进行练习，了解我们可以用来构建功能的小技巧。

First Number: <input type="number" ng-change="result()" ng-model="firstNumber"><br>
Last Number: <input type="number" ng-change="result()" ng-model="secondNumber"><br>

  $scope.result = function() {
        return $scope.firstNumber + $scope.secondNumber;
    };