Question

我是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的两倍。

为什么会这样？是否有更好/正确的方法来实现我想在这里实现的目标？

感谢您的帮助

Answer 1

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

<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-model的2倍。

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

<强>代码

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

Answer 2

Controller只执行一次，当然$ scope.twice不会神奇地更新自己。您可以将twice作为函数（请参阅其他答案）或设置观察程序，或使用ngChange指令。

我会使用普通的javascript Object.defineProperty，它可能是效率最高的：

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

Answer 3

你不能在另一个中使用范围变量，你已经使用了一个函数。一个选项如上所述使$ scope.twice成为一个函数，但当你需要它作为变量时，你可以使用ng-change。

  <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 };}

为什么角度js不会自动更新数字的两倍？

3 个答案: