AngularJS

Question

在 angular 中，我有一个过滤的人员列表，该列表从谓词函数中获取过滤条件。每次过滤列表更改时，我都想查看过滤列表的变量（称为 filteredPeople）。但我无法看到该变量何时发生变化。

我的代码如下：

HTML:

<ul>
    <li ng-repeat="person in ($ctrl.filteredPeople = ($ctrl.people | filter: $ctrl.filter))">
      ...
    </li>
</ul>

JS:

controller: ['$scope',
    function ($scope) {
        var $ctrl = this;

        $ctrl.people = {...}
        $ctrl.filteredPeople = [];


        $scope.$watch($ctrl.filteredPeople, function () {
           console.log("called"); //not being called 
        });

        $ctrl.filter = function (p) {
           //custom filter function for each item in the array of people
        }

      }]

如果需要，我可以回答任何问题并提供更多代码

Answer 1

angular.module('app', []).controller('ctrl', function($scope) {
  var vm = this;
  vm.items = [
    { name: 'Sam' },
    { name: 'Max' },
    { name: 'Tom' },
    { name: 'Henry' },
    { name: 'Jack' },
    { name: 'Kate' }
  ]
  var counter = 1;
  $scope.$watchCollection('vm.filtered', function(){
    console.log('Changed' + counter++);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl as vm'>
  <input type='text' ng-model='vm.filter' />
  <ul>
    <li ng-repeat='item in vm.filtered = (vm.items | filter : vm.filter)'>{{item}}</li>
  </ul>  
</div>

AngularJS - 观察过滤列表的变化

AngularJS - Watch filtered list for changes

watch