Question

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

任何帮助都将不胜感激。

Answer 1

使用$watch：

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

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

Answer 2

有几件事：

您应该在＆＃34;模型中定义您的模型＆＃34; type属性 - 有关详细信息，请参阅此处：http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/
你需要＆＃34;观看＆＃34;改变＆＃34;自行车＆＃34;财产，以更新＆＃34;轮胎＆＃34;属性。

这是一个更新的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。

其次，此处引用的所有jsbins都显示正在更新自行车属性时轮胎属性正在更新。 Here's another jsbin更清楚地表明了这一点。

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

Answer 3

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

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

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

});

以上内容仅在调用控制器时设置轮胎值，而不是在自行车的值发生变化时设置。这可以通过在自行车上添加一个手表来实现，这将在自行车价值变化时提供值轮胎

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

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

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

})

});

Answer 4

两种方式：

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 5

试试这个：

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

希望它有帮助.........

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

5 个答案:

更新