AngularJS - 通过另一个 ng-repeat 列表过滤 ng-repeat 列表答案

【问题标题】：AngularJS - filter a ng-repeat list by an other ng-repeat listAngularJS - 通过另一个 ng-repeat 列表过滤 ng-repeat 列表
【发布时间】：2014-05-29 15:15:52
【问题描述】：

从这个fiddle，我正在尝试通过另一个 ng-repeat 列表生成的某个按钮来过滤 ng-repeat 列表。

我有两个共享相同属性的列表：

$scope.products => product.category_id
$scope.categories => category.id

我使用 ng-repeat 在我的 html 中生成这些列表，我希望能够使用同样使用 ng-repeat 生成的类别按钮来过滤产品列表。

控制器

$scope.categories = [
    {name: 'Category 1', id: 1}, 
    {name: 'Category 2', id: 2}, 
    {name: 'Category 3', id: 3}, 
];

$scope.products = [
    {name: 'Product 1', category_id: 1}, 
    {name: 'Product 2', category_id: 2}, 
    {name: 'Product 3', category_id: 2}, 
    {name: 'Product 4', category_id: 3}, 
    {name: 'Product 5', category_id: 3}, 
    {name: 'Product 6', category_id: 3}
];

HTML

<div ng-app ng-controller='ctrl'>
<nav>
    <ul>
        <li ng-repeat='category in categories'>
            <input type="button" value='{{ category.name }}'
               ng-click='showcat = {category_id: {{ category.id }} }' />
        </li>
    </ul>
</nav>
<ul>
    <li ng-repeat='product in products | filter:showcat'>{{ product.name }}</li>
</ul>

见我的fiddle

但它不起作用:(我试图在我的控制器中创建一个自定义过滤器，但我得到了相同的结果。

提前感谢您的帮助:)

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

试试这个

function ctrl($scope) {

    $scope.categories = [
        {name: 'Category 1', id: 1}, 
        {name: 'Category 2', id: 2}, 
        {name: 'Category 3', id: 3}, 
    ];

    $scope.products = [
        {name: 'Product 1', category_id: 1}, 
        {name: 'Product 2', category_id: 2}, 
        {name: 'Product 3', category_id: 2}, 
        {name: 'Product 4', category_id: 3}, 
        {name: 'Product 5', category_id: 3}, 
        {name: 'Product 6', category_id: 3}
    ];
    $scope.showcat = { };
    $scope.setShowCat = function(id){
                $scope.showcat = {category_id: id };


    }
}

还有html

<div ng-app ng-controller='ctrl'>
    <nav>
        <ul>
            <li ng-repeat='category in categories'>
                <input type="button" ng-click='setShowCat (category.id)' value='{{ category.name }}' />
            </li>
        </ul>
    </nav>
    <ul>
        <li ng-repeat='product in products | filter:showcat'>{{ product.name }}</li>
    </ul>
</div>

【讨论】：

【解决方案2】：

这是因为ng-repeat 创建了自己的子范围，所以当您像您正在做的那样在ng-repeat 中设置showcat 时，它只是该范围的本地。创建$scope函数：

$scope.setShowcat = function(id) {
    $scope.showcat = {category_id : id};
}

然后调用：

<input type="button" value='{{ category.name }}' ng-click='setShowcat(category.id)' />

【讨论】：