javascript - AngularJS 嵌套 ul 列表和 ng-repeat

Question

首先我不得不说我是 AngularJS 的新手，但我必须修改一个 Web 应用程序，即将列表嵌套在另一个应用程序中:

<ul class="first-level">
  <li ng-repeat="item in list">{{item.parentNo1}}
     <ul class="level-2">
       <li ng-repat="item in list">{{item.childOfCurrentParent}}</li>
       . . .
     </ul>
  </li>

  <li ng-repeat="item in list">{{item.parentNo2}}
     <ul class="level-2">
       <li ng-repat="item in list">{{item.childOfCurrentParent}}</li>
       . . .
     </ul>
  </li>
</ul>

我收到了一个像这样的对象数组(JSON):

[{
    "id": 53,
    "nazwa": "Plafon Nekko",
    "foto": "01/01 _ Koma Nekko.jpg",
    "visible": 0,
    "cat_id": 1,
    "strona": 1,
    "styl": "nowoczesny",
    "rodzina": "Nekko",
    "kod": "O2177",
    "bookmark": true,
    "title": "nowoczesny Nekko",
    "page": 1,
    "image": "/lemir/www//gazetka/01/01 _ Koma Nekko.jpg",
    "width": 849,
    "height": 1201,
    "tags": "nowoczesny Koma O2180 Plafon Koma nowoczesny Koma O2181 Plafon Koma nowoczesny Koma O2182 Plafon Koma nowoczesny Koma O2183 Plafon Koma nowoczesny Koma O2184 Plafon Koma nowoczesny Koma O2185 Plafon Koma nowoczesny Koma O2186 Plafon Koma nowoczesny Koma O2187 Plafon Koma nowoczesny Nekko O2170 Plafon Nekko nowoczesny Nekko O2171 Plafon Nekko nowoczesny Nekko O2172 Plafon Nekko nowoczesny Nekko O2173 Plafon Nekko nowoczesny Nekko O2174 Plafon Nekko nowoczesny Nekko O2175 Plafon Nekko nowoczesny Nekko O2176 Plafon Nekko nowoczesny Nekko O2177 Plafon Nekko"
},...]

我需要将父级放在第一级，将其子级放在第二级，当循环找到另一个父级时，它应该创建另一个第一级li，依此类推。

我需要将样式属性(父级)与名称属性(子级)关联起来当 ng-repeat 找到另一个父值时，如何强制 ng-repeat 返回一级？

Answer 1

我知道这个问题有点老了，但我认为这是管理嵌套列表的一个很好的解决方案，在我看来这是更“干净”的方式。

这里是一位博主的链接，他发布了有关 Angular 中的递归模板的文章。当您不知道分层列表的深度时，此方法非常有用:

angularjs-recursive-templates

分层列表:

[ 
{ 
    title: 'Computers',
    categories: [
      {
        title: 'Laptops',
        categories: [
          {
            title: 'Ultrabooks'
          },
          {
            title: 'Macbooks'            
          }
        ]
      },
      {
        title: 'Desktops'
      },
      {
        title: 'Tablets',
        categories: [
          { 
            title: 'Apple'
          },
          {
            title: 'Android'
          }
        ]        
      }
    ]
  },
  {
    title: 'Printers'
  }
]

他的 Angular 样本:

<!-- recursive template -->
<script type="text/ng-template" id="categoryTree">
    {{ category.title }}
    <ul ng-if="category.categories">
        <li ng-repeat="category in category.categories" ng-include="'categoryTree'">           
        </li>
    </ul>
</script>
<!-- use -->
<ul>
     <li ng-repeat="category in categories" ng-include="'categoryTree'"></li>
</ul>

你可以在这个 JSFiddle 中看到决赛

我希望这可以帮助一些人。

切斯!