ng-repeat 嵌套 HTML 元素

Question

我喜欢使用 ng-repeat 使用 Angularjs 将数据打印到我的 html，我必须使用 unique 和 orderBy 来避免年月相等。

我的数据：

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"}
  ];

结构：

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

示例： http://plnkr.co/edit/Ddc5PIYZAduOdzihnNO7?p=preview

Answer 1

您提供的示例代码并没有多大意义。首先，数据在您的页面上不可用，因为您尚未将其添加到范围中。 demo.data 应该类似于 $scope.data

ng-repeat 已添加到您的 html 的元素中。您还可以添加一些 'keywords' 例如 orderBy 和 'unique' 来操纵 angular.

如何处理输出

我们的重复 <li> 中嵌套的每个元素都将针对 data 中的每个 json 对象重复。此数据会将其年、月和项目值写入 {{}} 封闭值所在的页面。例如 {{date.year}} 将显示日期的年份。

orderBy: 'year'会按年份排列日期，unique: 'item'会确保只提供一个带有项目值的对象。

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

在提问之前，您需要做更多的研究。您基本上只是要求某人为您编写代码。即使您要复制我或其他任何人给您的内容，我认为您还没有理解 angular 来实际实施它。请多花点时间学习angular，你会发现其实很简单！

这里有一些关于 ng-repeat 的资源可供查看；

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

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

编辑： 你这个 plunker 的例子与我认为你想要的结果非常不同。

Answer 2

嵌套项只有在同一关联年 and/or 月时才应包含在内。添加ng-if条件可能就是你要找的。

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

ng-repeat 嵌套 HTML 元素

ng-repeat nested HTML elements

angularjs

ng-repeat