在表格單元格上使用$ 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

回答

相關問題