AngularJS：带有数字输入的双向数据绑定

Question

我正在尝试使用角度数据绑定input type="number" 元素，但我似乎无法弄清楚如何让绑定工作。例如，当我更新任何值时，我希望绑定到它的值也会更新。

JSBin：http://jsbin.com/kiqivule/3/edit

任何帮助将不胜感激。

Answer 1

使用$watch:

app.controller('MyCtrl', function($scope) {
    $scope.tires = $scope.bikes * 2;

    $scope.$watch('bikes', function(){
        $scope.tires = $scope.bikes * 2;
    });
});

Answer 2

您想要实现的不是双向绑定。

app.controller('MyCtrl', function($scope) {

$scope.tires = $scope.bikes * 2;

});

上面只会在调用控制器时设置轮胎值，而不是在自行车值发生变化时设置轮胎值。这可以通过在 Bikes 上添加一个手表来实现，它会在 Bikes 值发生变化时轮胎值变化

app.controller('MyCtrl', function($scope) {

$scope.$watch('bikes', function(){

` $scope.tires = $scope.bikes * 2;`

})

});

Answer 3

两种方式：

1- `ng-change:

<input type="number" 
    ng-change="tires = bikes * 2"
    min="0" ng-model="bikes" placeholder="Bikes" id = "bikes"/>

或者....

2-$watch:

app.controller('MyCtrl', function($scope) {
  $scope.$watch('bikes', function(newValue, oldValue) {
      if(newValue === oldValue) {
          return; // Angular calls watch at initialization with no change
      }
      $scope.tires = $scope.bikes * 2;
  });
});

Answer 4

试试这个：

在html中，

使用 ng-change：

<input type="number" min="0" ng-model="bikes" placeholder="Bikes"
  ng-change="Calc()" id = "bikes"/>

在 JS 中，

$scope.Calc = function(){
   $scope.tires = $scope.bikes * 2;
};

希望对你有帮助.........

Answer 5

有几点：

• 您应该在“模型”类型属性中定义您的模型 - 请参阅此处了解详细信息：http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/

• 您需要“观察”对“自行车”属性的更改，以便更新“轮胎”属性。

这是一个更新的 JSBin，展示了如何做到这一点：http://jsbin.com/kiqivule/15/edit?html,js,output

更新

首先，$watchGroup only came in at v1.3.0-beta.6 - 在your script 中，您使用的是 v1.2.10。

其次，这里引用的所有 jsbin 都表明，当更新 bikes 属性时，轮胎属性正在更新。 Here's another jsbin 更清楚地显示了这一点。

所以我还是不确定你在这里追逐什么？