Question

我遇到使用AngularJS构建类别菜单的逻辑问题

我不打算打印父类别为ID 0的所有类别。一旦完成，我将不打印属于其父类别的所有子类别。结束类别菜单应如下所示：
- 音频，视频和照片
---音乐播放器
---乐器
--- ...
---休息
- 汽车
---整车

这就是我的类别对象的样子

    0: Object
    alias: "audio-video-and-photo"
    category: "AUdio, video & photo"
    id_category: "1"
    parrent: "0"
    __proto__: Object
    1: Object
    alias: "music-players"
    category: "Music players"
    id_category: "2"
    parrent: "1"
    __proto__: Object
    2: Object
    alias: "musical-instruments"
    category: "Musical instruments"
    id_category: "3"
    parrent: "1"
    __proto__: Object
    3: Object
    alias: "music-accessories"
    category: "Music accessories"
    id_category: "4"
    parrent: "1"
    __proto__: Object
    4: Object
    alias: "hi-fi"
    category: "Hi-Fi"
    id_category: "5"
    parrent: "1"
    __proto__: Object
    5: Object
    alias: "home-cinema"
    category: "Home cinema"
    id_category: "6"
    parrent: "1"
    __proto__: Object
    6: Object
    alias: "tv"
    category: "TV's"
    id_category: "7"
    parrent: "1"
    __proto__: Object
    7: Object
    alias: "rest"
    category: "Rest"
    id_category: "8"
    parrent: "1"
    __proto__: Object
    8: Object
    alias: "cars"
    category: "Cars"
    id_category: "9"
    parrent: "0"
    __proto__: Object
    9: Object
    alias: "whole-cars"
    category: "Whole cars"
    id_category: "10"
    parrent: "9"
    __proto__: Object
....

这就是我的HTML的样子

<div ng-repeat="c in categories track by $index">
    <h4 ng-if="c.parrent == 0">{{c.category}}</h4>
        <ul>
            <li><a href="index.html">{{c.category}}</a></li>
        </ul>
</div>

结束HTML应该与此类似

<div>
    <h4>Audio, video photo</h4>
        <ul>
            <li><a href="#">Music players</a></li>
            <li><a href="#">Music instruments</a></li>
            <li><a href="#">Music accessories</a></li>
            <li><a href="#">Hi-fi</a></li>
            <li><a href="#">Home cinema</a></li>
            <li><a href="#">Rest</a></li>
        </ul>
    <h4>Cars</h4>
        <ul>
            <li><a href="#">Whole cars</a></li>
            <li><a href="#">Car accessories</a></li>
            <li><a href="#">Car parts</a></li>
            <li><a href="#">Rest</a></li>
        </ul>
</div>

我希望你们能提供帮助。提前谢谢。

Answer 1

你可以使用ng-repeat来处理这个问题。这是一个嵌套<div ng-repeat="c in categories track by $index"> <h4 ng-if="c.parrent == 0">{{c.category}}</h4> <ul ng-if="c.parrent != 0" ng-repeat="sub_c in categories track by $index"> <li ng-if="sub_c.parrent == c.id_category"> <a href="#">{{sub_c.category}}</a> </li> </ul> </div>的解决方案。

ng-repeat

请注意，在渲染或使用辅助方法过滤子类别项之前组织数据会更好。这比underscore两次有效。

更新1：

根据要求，我发布了如何在渲染之前组织数据的想法。我将使用库lodash（或function build_category(categories) { var result = _.filter(categories, function(c) { return c.parrent == 0; }); _.forEach(result, function(c) { c.sub_categories = _.filter(categories, function(c2) { return c2.parrent == c.id_category; }); }); return result; } var grouped_categories = build_category(categories);）。

<div ng-repeat="c in grouped_categories track by $index">
   <h4>{{c.category}}</h4>
   <ul ng-if="c.sub_categories"
       ng-repeat="sub_c in c.sub_categories track by $index">
     <li><a href="#">{{sub_c.category}}</a></li>
   </ul>
</div>

Protected Overrides Function RequestComAddInAutomationService() As Object

    MsgBox("Request being Made")

    If dbShortCutCtrl Is Nothing Then
        dbShortCutCtrl = New DBShortCutKeyController
    End If

    Return dbShortCutCtrl
End Function

如果你有一个大类，你会看到一些性能差异。

使用angularJS构建类别菜单

1 个答案: