如何在过滤的集合发生变化时执行操作

Question

我有3个需要像级联下拉列表一样工作的连接列表，即选择第一个列表中的项目过滤第二个过滤第三个项目的项目。

为了实现这一点，我使用的角过滤器像这样：

<div ng-app="" ng-controller="DemoCtrl"> 
    <h3>Categories</h3> 
    <ul> 
     <li ng-repeat="cat in model.categories" 
      ng-click="selectCategory(cat)" 
      ng-class="{ active: cat === selectedCategory }">{{ cat }}</li> 
    </ul> 
    <h3>Sub Categories</h3>  
    <ul> 
     <li 
      ng-repeat="cat in model.subCategories | filter: { parent:selectedCategory }" 
      ng-click="selectSubCategory(cat)" 
      ng-class="{ active: cat.name === selectedSubCategory }">{{ cat.name }}</li> 
    </ul> 
    <h3>Products</h3> 
    <ul> 
     <li ng-repeat="product in model.products | filter:{ category:selectedSubCategory }">{{ product.name }}</li> 
    </ul> 
</div> 

当顶层类别改变（selectCategory）我需要，以确保第一子类也被选择：

$scope.selectCategory = function (cat) { 
    $scope.selectedCategory = cat; 

    // how to select the first sub category? 
}; 

由于设置$scope.selectedCategory会更新已过滤的子类别，因此我可以在过滤收集发生更改时通知我，以便我可以选择第一项（$scope.selectSubCategory）？

http://jsfiddle.net/benfosterdev/dWqhV/

Answer 1

你可以set up a watcher上$scope.selectedCategory和manually run $filter拿到第一子类。

Answer 2

最后，我选择了在我的控制器中执行过滤并绑定到我的$scope上的“过滤”对象。当主要类别改变时，我们重新筛选子类别并选择第一项：

$scope.selectCategory = function (cat) { 
    $scope.model.selectedCategory = cat; 

    var filtered = $scope.getSubCategoriesOf(cat); 
    $scope.model.filteredSubCategories = filtered; 
    $scope.selectSubCategory(filtered[0]); 
} 


$scope.getSubCategoriesOf = function (cat) { 
    return $filter('filter')($scope.model.subCategories, { parent: cat }, true); 
}