为什么Angular JS不会自动更新数字两次

我是Angularjs的绝对新手，我正在尝试编写一个代码，其中HTML应自动显示我输入的数字两倍 -

这是我的代码的样子 -

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <link href="./style.css" rel="stylesheet"/>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
</head>
<body>
    <div ng-controller="frmCtrl">
      <label>Name:</label>
      <input type="text" ng-model="number" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{twice}}!</h1>
    </div>
  <script>
    app = angular.module("myApp", []);
    app.controller("frmCtrl", function($scope) {
        $scope.number = "2";
        $scope.twice = 2*$scope.number;}
    );
  </script>
</body>
</html>

但是，此代码根本不起作用 - 当我在输入框中更新值时，该代码不会自动更新两次，尽管最初显示的值为4，对应于2个。

。

为什么会发生这种情况？是否有一种更好/正确的方法来实现我在这里要实现的目标？

感谢您的帮助

更好的方法是，您可以在number值更改时修改twice值。对于相同的您可以编写number输入字段的ng-change函数，并从change函数中修改twice值。

<input type="text" ng-model="number" placeholder="Enter a name here" ng-change="updateTwice()"/>
<h1>Hello {{twice}}!</h1>

代码

$scope.updateTwice = function(){
   $scope.twice = 2 * $scope.number;
}

另一种方法可能是将twice作为函数更改。在视图绑定上调用twice，以便在每个摘要周期中进行评估，确保视图上显示的任何内容是number ng模型的2次。

<h1>Hello {{twice()}}!</h1>

代码

$scope.twice = function(){
 return 2*$scope.number;
}

控制器仅执行一次，当然$ scope.twice不会神奇地自行更新。您要么将twice作为函数（请参阅其他答案）或设置观察者，要么使用ngChange指令。

我将使用普通的JavaScript对象。DefineProperty，它可能是最有效的：

app.controller("frmCtrl", function($scope) {
  $scope.number = "2";
  Object.defineProperty($scope, 'twice', {
    get() {
      return 2 * $scope.number
    }
  })
});

您不能在另一个范围内使用范围变量，而是使用函数。一个选项是上述$范围。

  <input type="text" ng-model="number" ng-change="calc_twice()" placeholder="Enter a name here">

和在控制器中：

    $scope.twice = "4";
    $scope.calc_twice = function() { $scope.twice = 2 * $scope.number };}

相关内容

最新更新

热门标签：