Question

刚开始学习AngularJS。我试图通过编写一个从输入框中添加两个数字的代码来理解双向数据绑定。这是我写的：

HTML

 <div ng-app="cal">
    <div  ng-controller="calc">
    <input type="text" ng-model="a"/>
    <input type="text" ng-model="b"/>
    <span>{{result}}</span>
    </div>
    </div>

的JavaScript

   var app=angular.module("cal", []);
        app.controller("calc",function ($scope) {
        $scope.result=Number($scope.a || 0)+ Number($scope.b || 0);
      });

然而，这并没有给出预期的结果，即＆＃34;结果＆＃34;不会自动更新。

但以下代码有效：

HTML

<div ng-app="cal">
<div  ng-controller="calc">


<input type="text" ng-model="a" ng-keyup="add()"/>
<input type="text" ng-model="b" ng-keyup="add()"/>

<span>{{result}}</span>
</div>
</div>

的JavaScript

  app.controller("calc",function ($scope) {
   $scope.add=function(){
        $scope.result=Number($scope.a || 0)+ Number($scope.b || 0);
    }
  });

为什么我需要＆＃34; keyup＆＃34;指示？不应该变量＆＃34;结果＆＃34;当字段中的值发生变化时会自动更新？

我还在这里创建了一个jsfiddle： https://jsfiddle.net/Deadboy/m9ket0sL/

Answer 1

不，不应该。当角度看到DOM中的ng控制器时，控制器功能执行一次。每次在输入框中键入内容时都不会执行此操作。因此，在用户有机会在输入中输入任何内容之前，计算结果的代码只执行一次。

但是你不需要键盘（如果你用鼠标粘贴值，这将不起作用，BTW）。你所需要的只是

$scope.add = function(){
     return (Number($scope.a || 0)+ Number($scope.b || 0));
}

并在视图中：

<span>{{ add() }}</span>

当这样做时，angular将在修改模型的每个事件之后重新评估add()表达式，并使用表达式的结果更新DOM。

如果您只想在a或b更改时计算结果，则应使用ng-change，而不是ng-keyup。

请注意，如果您的输入应仅包含数字，则应使用类型编号的输入，而不是文本。在这种情况下，$scope.a和$scope.b的类型为数字，而不是字符串。

Answer 2

范围变量（a）和（b）正在更新，因为它们是双向绑定的。

变量a1和b1将不会获得更新，因为它们仅在您启动控制器“calc”时才会更新，并且它们不是双向绑定。

要更新结果范围变量，您可以使用ng-change将变量a1和b1设置为$ scope.a和$ scope.b的更新

<div ng-app="cal">
<div  ng-controller="calc">


<input type="text" ng-model="a" ng-change="updateResult()"/>
<input type="text" ng-model="b" ng-change="updateResult()"/>

<span>{{result}}</span>
</div>

/**
 * Created by rajat on 12-Nov-16.
 */
var app=angular.module("cal", []);


app.controller("calc",function calc($scope) {
    $scope.updateResult = function () {
      var a1 = Number($scope.a || 0);
      var b1 = Number($scope.b || 0);
      $scope.result=a1+b1;
    }
});

在AngularJS中添加数字

2 个答案: