使用 angularJS 构建类别菜单

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-if这样处理。这是一个嵌套 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 两次更有效。

更新一：

根据要求，我 post 想到了如何在渲染前组织数据。我将使用库 underscore（或 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>

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

使用 angularJS 构建类别菜单

Build category menu with angularJS

html

angularjs

ng-repeat

angular-ng-if