观察角度过滤项目的变化

Watching for change in filtered items in angular

本文关键字：变化 项目 过滤 观察      更新时间：2023-09-26

我有一个简单的Angular应用程序，其中包含一些数据，以及一个用于过滤该数据的输入框。

<input class="form-control" ng-model="filters.generic" />
<h3>{{filteredUsers.length}} filtered users</h3>
<ul>
  <li ng-repeat="user in filteredUsers = (data.userData | filter:filters.generic )">
     {{user.registration.firstName}}
  </li>                                    
</ul>

"filteredUsers"变量存储应用过滤器的用户。这一切都绝对没问题。但是，我希望能够添加一个手表来执行特定函数，只要这个"filteredUsers"变量发生变化（每当用户在输入框中键入任何内容）。

我不想简单地在输入上添加一个方法来 ng-change，因为我想在其他地方引入其他过滤器。

我以为我可以在我的控制器中做到这一点

$scope.$watch('filteredUsers', function () {        
    alert('something');
});

此操作在应用程序加载时执行一次，然后永远不会再次执行。我必须执行哪些操作才能监视对筛选用户的更改？

您可能需要使用 $watchCollection（） 而不是 $watch（）

请记住，ng-repeat上的过滤器的运行频率可能比您需要或预期的要高，并且会对代码的性能产生不利影响。即使你说你不想使用 ng-change，我认为你应该重新考虑一下，只在需要时更新你的数组。

<input class="form-control" ng-model="filters.generic" ng-change="genericFilterChange()" />

var updateFilteredUsers = function(){
  $scope.filteredUsers = $filter('filter')($scope.data.userData, $scope.filters.generic);
  alert('something');
};
var genericFilterChange = function(){
  updateFilteredUsers();
  updateOtherFilteredThings();
};
相关文章：