如何更新AngularJS指令中的過濾數組？

我是AngularJS的新手。我已經構建了一個指令，在一個名爲「todos」的數組上使用了一個Isolate Scope（=）。然後過濾todos數組，並將其稱爲filteredArray。我的「todos」元素使用雙向綁定進行更新，但我不知道必須將todos的更新綁定到filteredArray。如何更新AngularJS指令中的過濾數組？

我已經爲我的實驗設置了一個小提琴：http://jsfiddle.net/apkk3rjc/你甚至可以看到我試圖在我的JS的第50行上設置一個簡單的$ watch（），但它似乎沒有超出第一次加載。

需要明確的是：我不需要雙向綁定回我的控制器，但我確實需要filteredTodos時進行了更改待辦事項自動更新。

這裏是我的指令：

todoApp.directive('todoList', ['filterFilter', function(filterFilter) { 
return { 
    restrict: 'E', 
    templateUrl: 'todo-list.html', 
    scope: { 
     todos: '=' 
    }, 
    link: function (scope, element, attrs) { 
     // scope.todos is bound 
     // scope.filteredTodos is not! 
     scope.filteredTodos = filterFilter(scope.todos, { completed: false }); 
    } 
}; 
}]);

來源

2014-10-05 Christopher Inch

可重複演示將有所幫助 – 2014-10-05 11:41:39

按需過濾，或在未過濾的陣列上使用手錶。 – 2014-10-05 11:59:59

我已經找到了答案，以我自己的問題。需要應用兩件事：

首先，scope.filteredTodos不會自動綁定，所以無論何時修改scope.todos，都必須重新計算。所以我們在數組中添加一個$ watch。

我原來的$表看起來像這樣，是錯誤的：

// Watch the entire array. DOESN'T FIRE ON NEW ITEMS 
scope.$watch('todos', function() { ... });

這不起作用，因爲看整個數組不跟蹤變化。最後，我只是看着數組的長度。或者，您可以將第三個參數'deep'設置爲true，但這會帶來很多開銷，尤其是在數組非常大的情況下。但是，如果您想要觀看陣列中的每個項目以進行更改，這將是唯一的方法。

// Watch the entire array with deep analysis. Costly, but works. 
scope.$watch('todos', function() { ... }, true);

所以，因爲我只是在我的數組中尋找新的元素，所以我去看'todos.length'。

來源

2014-10-06 14:54:25

如何更新AngularJS指令中的過濾數組？

回答

相關問題