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?
Share Improve this question asked Apr 19, 2014 at 16:06 AnksAnks 48510 silver badges27 bronze badges2 Answers
Reset to default 3Here 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.