Question

我有一个简单的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');
});

这会在应用程序加载时执行一次，然后再也不会执行。我该怎么做才能让这个手表改变filterUsers？

Answer 1

您可能需要使用$ 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();
};

观察角度过滤项目的变化

1 个答案: