Question

所以在我目前的角度应用中，我的json结构看起来像这样：

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]

我试图找出如何使用ng-repeat来获得以下UL结构：

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

这是我目前的html设置：

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

我想知道它是否有可能实现我正在寻找的当前json嵌套结构的ul结构，如果是这样，我将如何实现它？

Answer 1

这是一个bin http://jsbin.com/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.com/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]}
  ];
});

Answer 2

你可以这样做。

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

或者你可以使用任何其他不可见的东西，或者你可以使用css使它不可见。

angularjs ng-repeat一个长的无序列表

2 个答案: