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

Question

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

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

• $scope.products => 产品.category_id
• $scope.categories => 类别.id

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

Controller

$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

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

预先感谢您的帮助:)

Answer 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>