Question

我正在尝试使用角度ng-repeat创建一个下拉菜单。我有一个jd对象，其中包含一个名为parent_id的字段，该字段指示此节点应显示的父节点。我需要的帮助是根据以前过滤的数据创建过滤器，如标记

中所示

我的标记代码：

<div >
    <ul class="nav nav-pills" data-ng-controller= "MenuController" >
        <li data-ng-class="{'active':getClass('/customers')}"
            data-ng-repeat="menuItem in menuItems | filter: { ParentId: '0' }" >
            <a href="#/customers"> {{ menuItem.Name }}    </a>
            **<ul>
                <li data-ng-repeat="menuItem1 in menuItems | filter: { ParentId: {{ menuItem1.ParentId }}  }">
                    {{ menuItem1.Name }}
                </li>
            </ul>**
        </li>
    </ul>
</div>

我的服务：

app.service('menuService', function () {
this.getMenuItems = function () {
    return  menuItems;
};
var menuItems = [
    {
        id: 'ABCDFER1', Name: 'Apperal', ParentId: 0, description: 'Beautifull Apparels'
    },
    {
        id: 'ABCDFER2', Name: 'Electronics', ParentId: 0, description: 'Electronic bargains'
    },
    {
        id: 'ABCDFER3', Name: 'Home & Kitchen', ParentId: 0, description: 'For your kitchen'
    },
    {
        id: 'ABCDFER4', Name: 'Services', ParentId: 0, description: 'Services for you'
    },
    {
        id: 'ABCDFER5', Name: 'Men', ParentId: 'ABCDFER1', description: 'Men Apperal'
    },
    {
        id: 'ABCDFER6', Name: 'Women', ParentId: 'ABCDFER1', description: 'Women Apperal'
    }
];

我的控制器：

$scope.menuItems = menuService.getMenuItems();

Answer 1

如果我正确理解你要完成的任务，我相信你想要这个：

<div >
    <ul class="nav nav-pills" data-ng-controller= "MenuController" >
        <li data-ng-class="{'active':getClass('/customers')}"
            data-ng-repeat="menuItem in menuItems | filter: { ParentId: '0' }" >
            <a href="#/customers"> {{ menuItem.Name }} </a>
            <ul>
                <li data-ng-repeat="menuItem1 in menuItems | filter: { ParentId: menuItem.id }">
                    {{ menuItem1.Name }}
                </li>
            </ul>
        </li>
    </ul>
</div>

注释的变化：

您想要过滤父项的ID，而不是父项的id 当前项目。
过滤器值周围不需要{{}}，因为这被解释为代码，而不是模板。

AngularJS ngrepeat - 基于范围数据的过滤器

1 个答案: