在表格单元格上使用$ watch

我需要根据表格单元格变化中输入框的值更新触发器更新。该表使用ng-repeat与$ resource调用的结果进行比较。

关键是我需要每次更改时更新2个不同的值。 1是同一表格行内的另一个单元格，第二个单元格位于表格本身之外。这似乎阻止在ng-repeat级别使用特定的控制器。

我创建了这个plunkr来试图提供帮助。 http://plnkr.co/edit/773WhoUvWoUZ40AfuzMO?p=preview

// Code goes here 
angular.module('plunker', []) 
.controller('ItemCtrl', function ($scope) { 
    $scope.user_votes = 100; 
    $scope.items = [ 
     {item: "Foo1", description: "Really Fancy Foo", total_votes: 0, my_votes: 0}, 
     {item: "Foo2", description: "Boring Foo", total_votes: 0, my_votes: 0}, 
     {item: "Widget 1", description: "Base widget 1", total_votes: 0, my_votes: 0}, 
     {item: "Big Widget", description: "Humongous Widget", total_votes: 0, my_votes: 0}, 
     {item: "FooBar", description: "FooBar in Gold", total_votes: 0, my_votes: 0} 
    ]; 


    // This doesn't work, but I am not sure why. 
    $scope.$watch('item.my_votes', function(newVal, oldVal){ 
     $scope.user_votes = $scope.user_votes - newVal.my_votes; 
     newVal.total_votes = newVal.total_votes + newVal.my_votes; 
    }); 
});

HTML代码是所有的

<!DOCTYPE html> 
<html ng-app="plunker"> 

<head> 
<link rel="stylesheet" href="style.css"> 
<link rel="stylesheet" href="style.css" /> 
<script data-require="[email protected]" src="http://code.angularjs.org/1.1.5/angular.min.js" data-semver="1.1.5">  </script> 
<script src="script.js"></script> 
</head> 

<body ng-controller="ItemCtrl"> 
<div>You have {{ user_votes }} votes remaining</div> 
<table> 
    <thead> 
    <tr> 
     <th>Item</th> 
     <th>Description</th> 
     <th>My Votes</th> 
     <th>Total Votes</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="item in items"> 
     <td>{{ item.item }}</td> 
     <td>{{ item.description }}</td> 
     <td><input name="votes" ng-model="item.my_votes"/></td> 
     <td>{{ item.total_votes }}</td> 
    </tr> 
    </tbody> 
</table> 
<button ng-click="saveForm">Cast Votes</button> 
</body> 
</html>

来源

2015-12-18 jesmith17

首先是因为NG-重复创建其自己独立的范围（docs）在您的控制器范围内没有一个单一的项目。这就是为什么在你改变模型后没有任何事情发生。在这种情况下，您可以采取不同的方法来实现实时重新加载。您可以您的项目阵列上执行深手表或者您可以使用NG-改变其结合NG-模型像这样的作品（$范围$ watchCollection）：

HTML

<div>You have {{ user.left }} votes remaining</div> 
<table> 
    <thead> 
    <tr> 
     <th>Item</th> 
     <th>Description</th> 
     <th>My Votes</th> 
     <th>Total Votes</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="item in items"> 
     <td>{{ item.item }}</td> 
     <td>{{ item.description }}</td> 
     <td><input name="votes" type='number' ng-model="item.my_votes" ng-change='recalc()'></td> 
     <td>{{ item.total_votes + item.my_votes }}</td> 
    </tr> 
    </tbody> 
</table> 
<button ng-click="saveForm">Cast Votes</button>

$scope.user = { 
    base: 100, 
    left: 100 
} 

$scope.items = [ 
    {item: "Foo1", description: "Really Fancy Foo", total_votes: 0, my_votes: 0}, 
    {item: "Foo2", description: "Boring Foo", total_votes: 0, my_votes: 0}, 
    {item: "Widget 1", description: "Base widget 1", total_votes: 0, my_votes: 0}, 
    {item: "Big Widget", description: "Humongous Widget", total_votes: 0, my_votes: 0}, 
    {item: "FooBar", description: "FooBar in Gold", total_votes: 0, my_votes: 0} 
]; 

$scope.recalc = function() { 
    $scope.user.left = $scope.user.base; 
    for(var i = 0; i < $scope.items.length; i++) { 
    $scope.user.left -= ($scope.items[i].total_votes + $scope.items[i].my_votes); 
    } 
}

Plnkr

来源

2015-12-18 16:53:07 Rafal2228

为什么不能在这里使用NG-变化？把你的手表放在一个函数中，这个函数会被调用。

<td><input name="votes" ng-model="item.my_votes" ng-change="watchFunction(item.my_votes, {{item.my_votes}})"/></td>

其中第一个参数是新值，第二个参数是旧值。（如果你需要旧的价值，所有）

来源

2015-12-18 19:52:06

在表格单元格上使用$ watch

回答

相关问题