AngularJS nested ul list and ng-repeat

问题

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>

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"
},...]

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.

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?

回答1:

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

the hierarchical list:

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

His angular sample:

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

And you can see the final in this JSFiddle

I hope this might help some people.

Tchuss!

回答2:

My suggestion would be to handle this situation in the model instead of doing it on the front side.

You can create 2 custom functions that return the model as you need it.

Then you can call them like this:

<ul ng-repeat="parent in getParents(items)">
    ...
    <ul ng-repeat="child in getChildren(items, parent)">
        ...

Or, if you have control over the Json format, the much easier solution would be to just change it to suit your needs. You can change it to be an array of parents. Then have each parent contain an array of children.

Then things will become a lot simpler; something like:

<ul ng-repeat="parentItem in items">
    ...
    <ul ng-repeat="childItem in parentItem.children">
        ...

回答3:

You can also do something like this. you can add array of children into your json and loop through it.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.list = [{
    "id": 53,
    "nazwa": "Plafon Nekko",
    "foto": "01/01 _ Koma Nekko.jpg",
    "visible": 0,
    "cat_id": 1,
    "strona": 1,
    "styl": "nowoczesny",
    "rodzina": "Nekko",
    "kod": "O2177",
    "children": [{
      "name": "xyz",
      "age": "15"
    }, {
      "name": "pqr",
      "age": "10"
    }],
    "tags": "nowoczesny Koma O2180"
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="parent in list">{{parent.nazwa}}
      <ul>
        <li ng-repeat="child in parent.children">{{child.name }}</li>
      </ul>
    </li>
  </ul>
</div>

来源：https://stackoverflow.com/questions/27252097/angularjs-nested-ul-list-and-ng-repeat