AngularJS嵌套ul列表和ng-repeat [英] AngularJS nested ul list and ng-repeat

问题描述

起初我不得不说我是AngularJS的新手，但我必须修改一个网络应用程序，即将列表嵌入另一个：

At first I have to say I'm new to AngularJS but I have to modify a web app, that is to nest list inside another:

<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），如下所示：

I received an array of objects (JSON) like this:

[{
    "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 依此类推。

I need to put parent at first level and its children at second level, and when the loop finds another parents it should create another first-level li and so on.

我需要将样式属性（父级）与name属性（子级）相关联
如何强制ng-repeat去当它找到另一个父值时回到第一级？

I need to associate style property (parent) with name property (child) How can I force ng-repeat to go back to level one when it finds another parent value?

推荐答案

我知道这个问题有点老但我认为这是一个管理嵌套列表的好方法，在我看来，它更干净。

I know the question is a bit old but I think this is a good solution to manage nested-list and in my opinion it's more 'clean' way.

这里是一个博主发布有关角度递归模板的链接。当您不知道分层列表的深度时，此方法非常有用：

Here the link of a blogger who posted about recursive templates in angular. This method is very useful when you don't know the depth of your hierarchical list:

angularjs-recursive-templates

分层列表：

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

他的角度样本：

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

我希望这对某些人有帮助。

I hope this might help some people.

Tchuss！

这篇关于AngularJS嵌套ul列表和ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！