AngularJS Watcher与Digest Loop问题：输入数值乘2结果未实时更新

你的预期完全合理，符合AngularJS内置的Watcher与Digest Loop机制的设计逻辑，当前代码无法实现同步更新是因为缺少变量变更后重新计算乘积的触发逻辑。

你在控制器中编写的$scope.multipleBy2 = $scope.number * 2仅会在控制器初始化阶段执行一次，此时$scope.number是空字符串，所以初始计算结果为0。后续$scope.number随输入框内容更新时，没有逻辑触发multipleBy2的重新计算，因此页面上该字段不会同步更新。

共有三种常见的实现方式可选：

• 方案1：使用$watch监听number变量的变化，值变更时自动重新计算乘积
  修改后的index.js代码如下：

var myapp = angular.module("myapp", []);
var maincontroller = function ($scope) {
  $scope.number = "";
  // 监听number的变更，每次更新后重新计算乘积
  $scope.$watch('number', function(newVal) {
    $scope.multipleBy2 = Number(newVal) * 2;
  })
};
myapp.controller("maincontroller", maincontroller);

• 方案2：将乘积逻辑定义为作用域方法，在模板中直接调用
  修改后的index.js代码如下：

var myapp = angular.module("myapp", []);
var maincontroller = function ($scope) {
  $scope.number = "";
  // 定义为计算方法
  $scope.multipleBy2 = function() {
    return Number($scope.number) * 2;
  }
};
myapp.controller("maincontroller", maincontroller);

同步修改模板中对应的调用代码：

<p>
乘以2结果 : {{ multipleBy2() }}
</p>

• 方案3：直接在模板内完成计算（最简洁）
  无需修改JS代码，直接调整模板中的输出逻辑即可：

<p>
乘以2结果 : {{ number * 2 }}
</p>

建议将输入框的type属性从text改为number，避免输入非数字内容时出现NaN异常，修改后代码如下：

<input type="number" id="input_value" ng-model="number" />

内容的提问来源于stack exchange，提问作者Raja G