admin管理员组

文章数量:1435859

So in my current angular app my json structure looks like this:

0: Object
      $$hashKey: "004"
      Date: "2014-04-17"
      Items: Array[3]
1: Object
      $$hashKey: "005"
      Date: "2014-04-18"
      Items: Array[3]
2: Object
      $$hashKey: "006"
      Date: "2014-04-19"
      Items: Array[3]

I am trying to figure out how I can use ng-repeat to be able to obtain the below UL structure:

<ul>
<li class="date"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="date"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="date"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>

This is current my html setup:

<ul ng-controller="MainCtrl">
  <li class="date" ng-repeat="day in Days">
    <strong>>{{ day.Date }}</strong>
  </li>

  <li class="item" ng-repeat="item in day.Items">
    <strong>>{{ item.Name }}</strong>
  </li>
</ul>

I am wondering if its at all possible to achieve that ul structure I am looking for with my current json nested structure and if so how would I be able to achieve it?

So in my current angular app my json structure looks like this:

0: Object
      $$hashKey: "004"
      Date: "2014-04-17"
      Items: Array[3]
1: Object
      $$hashKey: "005"
      Date: "2014-04-18"
      Items: Array[3]
2: Object
      $$hashKey: "006"
      Date: "2014-04-19"
      Items: Array[3]

I am trying to figure out how I can use ng-repeat to be able to obtain the below UL structure:

<ul>
<li class="date"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="date"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="date"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>

This is current my html setup:

<ul ng-controller="MainCtrl">
  <li class="date" ng-repeat="day in Days">
    <strong>>{{ day.Date }}</strong>
  </li>

  <li class="item" ng-repeat="item in day.Items">
    <strong>>{{ item.Name }}</strong>
  </li>
</ul>

I am wondering if its at all possible to achieve that ul structure I am looking for with my current json nested structure and if so how would I be able to achieve it?

  • javascript
  • jquery
  • json
  • angularjs
Share Improve this question asked Apr 19, 2014 at 16:06 AnksAnks 48510 silver badges27 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

Here is a bin http://jsbin./puvafefe/1/

<!DOCTYPE html>
<html ng-app='App'>
  <head>
      <script type="text/ng-template" id="tmpl">
          <li></li>
      </script>
  </head>
  <body>
    <div ng-controller="sCtr">
    <ul>
    <li ng-repeat-start="obj in json">{{obj.date}}</li>
    <li ng-repeat-end ng-repeat="item in obj.items">{{item}}</li>
    </ul>
    </div>
    <script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  </body>
</html>

Js

var app = angular.module("App", []);

app.controller("sCtr", function($scope) {
  $scope.json = [
    {date: "2014-04-17", items: [1,2,3]},
    {date: "2014-04-18", items: [4,5,6]}
  ];
});

You can do this for example.

<ul ng-controller="MainCtrl">
  <li class="date" ng-repeat-start="day in Days">
    <strong>>{{ day.Date }}</strong>
  </li>

  <li class="item" ng-repeat="item in day.Items">
    <strong>>{{ item.Name }}</strong>
  </li>
  <span ng-repeat-end></span>
</ul>

Or you can use anything else non visible, or you can make it invisible using css.

本文标签： javascriptangularjs ngrepeat one long unordered listStack Overflow

版权声明：本文标题：javascript - angularjs ng-repeat one long unordered list - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745667659a2669379.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。