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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有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/

回答：

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

回答：

最后，我选择了在我的控制器中执行过滤并绑定到我的$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); 
}

以上是 如何在过滤的集合发生变化时执行操作 的全部内容， 来源链接： utcz.com/qa/257229.html

回到顶部