ng-repeat nested HTML elements

Question

I like to use ng-repeat to print data to my html using Angularjs, i have to use unique and orderBy to avoid equals in year and month.

My data:

demo.data = 
  [
      { "year": 2016, "month": "November", "item": "November 01"}
    , { "year": 2016, "month": "November", "item": "November 02"}
    , { "year": 2016, "month": "January", "item": "January 01"}
    , { "year": 2015, "month": "December", "item": "December 01"}
  ];

Structure:

<ul>
  <li>
    <span>Year</span>
    <ul>
      <li>
        <span>Month</span>
        <ul>
          <li>
            <span>Item</span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Example: http://plnkr.co/edit/Ddc5PIYZAduOdzihnNO7?p=preview

I tried use ng-repeat, but month not is a array inside year.. This cause a problem with ng-repeat. — user3251174
– user3251174, Commented Feb 23, 2017 at 1:20
you should structure your data in your controller so that it matches what you want to display. don't expect angular to know how to separate your data for you, and don't try to modify the data in the view. — Claies
– Claies, Commented Feb 23, 2017 at 1:21
ng-repeat must use for array, you just have an array is data, year, month, item are not array, you can't use ng-repeat for it. — Huy Chau
– Huy Chau, Commented Feb 23, 2017 at 1:22
@WorkMe, i know that, because that i liked to use only ng-repeat and not have a loop to create another object/array — user3251174
– user3251174, Commented Feb 23, 2017 at 1:29

callmepills · Accepted Answer · 2017-02-23 02:00:12Z

2

The nested items should only be included if they are in the same associated year and/or month. Adding ng-if conditions may be what you are looking for.

<body ng-controller="DemoController as demo">
  <ul>
    <li ng-repeat="y in demo.data | orderBy:'+year' | unique:'year'">
      <span ng-bind="y.year"></span>
      <ul>
        <li ng-repeat="m in demo.data | orderBy:'+month' | unique:'month'" ng-if="m.year == y.year">
          <span ng-bind="m.month"></span>
          <ul>
            <li ng-repeat="i in demo.data | orderBy:'+item' | unique:'item'" ng-if="i.year == y.year && i.month == m.month">
              <span ng-bind="i.item"></span>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</body>

answered Feb 23, 2017 at 2:00

callmepills

7221 gold badge9 silver badges13 bronze badges

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

Comments

score 0 · Accepted Answer · 2017-02-23 01:39:36Z

0

The example code you've provided doesn't really make a lot of sense. Firstly the data wont be available on your page because you haven't added it to the scope. demo.data should look similar to $scope.data

ng-repeat is added to an element of your html. You can also add some 'keywords' such as orderBy and 'unique' to manipulate how the output is handled by angular.

Every element nested inside our repeating <li> will be repeated for each json object in data. This data will have it's year, month and item value written to the page where the {{}} enclosed values are. For instance {{date.year}} will display the date's year.

The orderBy: 'year' will arrange the dates by the year, and the unique: 'item' will ensure only one object with the item value is provided.

<ul>
  <li ng-repeat="date in data | unique:'item' | orderBy: 'year'">
    <span>{{date.year}}</span>
    <ul>
      <li>
        <span>{{date.month}}</span>
        <ul>
          <li>
            <span>{{date.item}}</span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

You need to do a little more research before asking a question. You've essentially just asked somebody to write you code for you. Even if you were to copy what I, or anyone else, gave you I don't think you yet have the understanding of angular to actually implement it. Please spend some more time learning angular and you'll find it's actually quite easy!

Here are some resources regarding ng-repeat to check out;

https://docs.angularjs.org/api/ng/directive/ngRepeat

https://www.w3schools.com/angular/ng_ng-repeat.asp

EDIT: You plunker example is very different from the kind of result I thought you were after.

edited Feb 23, 2017 at 1:39

answered Feb 23, 2017 at 1:33

user4759317

3 Comments

Claies Over a year ago

this isn't going to produce the result the OP is expecting either, but that's mostly because the data isn't structured properly to be displayed in the manner expected. ng-repeat can't make flat data into nested data.

user3251174 Over a year ago

Your code generate duplicates to year and month. About the data scope, i dont have use $scope, i recommend to read: toddmotto.com/…

user4759317 Over a year ago

If you want a list of years, with months, then dates, you will need to create a data structure that consists of nested arrays. Then you will be able to nested ng-repeats on each of the levels you're after.

Collectives™ on Stack Overflow

ng-repeat nested HTML elements

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related