0

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?

Improve this question
2
  • 1
    The JSON that you provided doesn't show any signs of a child-parent relationship. Commented Dec 2, 2014 at 14:43
  • 1
    Ok so what property do you recommend I should add to JSON? I need to associate style property (parent) with name property (child) Commented Dec 2, 2014 at 14:46

3 Answers 3

Reset to default
11

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!

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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">
        ...
Improve this answer

5 Comments

Could you give me some trival example of those custom functions?
Do you have over the Json structure? If yes you could just change it to be useful for what you need directly.
Yes i have, how should I change it? Above I put one object from JSON file. All properties are the same in rest objects. "Styl" is a parent and "rodzina" is a child.
Just change it to be an array of parents. Then have each parent contain an array of children.
Thank you so to confirm I need to change json file like you said and use ng-repeat directive with functions like in your example above?
0

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.