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

您可以$scope.selectedCategory和set up a watcher 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);
}

如何在筛选的集合更改时执行操作

2 个答案: