ng-repeat 嵌套的 HTML 元素答案

【问题标题】：ng-repeat nested HTML elementsng-repeat 嵌套的 HTML 元素
【发布时间】：2017-02-23 10:00:12
【问题描述】：

我喜欢使用 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

【问题讨论】：

我尝试使用 ng-repeat，但 month 不是一年内的数组。这会导致 ng-repeat 出现问题。
请给我们看代码
您应该在控制器中构建数据，使其与您想要显示的内容相匹配。不要指望 Angular 知道如何为您分离数据，也不要试图修改视图中的数据。
ng-repeat 必须用于array，你只有一个数组是data，year，month，item不是数组，你不能使用@987654331 @为它。
@WorkMe，我知道，因为我喜欢只使用 ng-repeat 而没有循环来创建另一个对象/数组

标签： angularjs ng-repeat

【解决方案1】：

只有在同一关联年份和/或月份中的嵌套项目才应包含在内。添加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>

【讨论】：

【解决方案2】：

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

ng-repeat 被添加到您的 html 元素中。您还可以添加一些“关键字”，例如 orderBy 和 'unique' 来控制 angular 如何处理输出。

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

orderBy: 'year' 将按年份排列日期，unique: 'item' 将确保仅提供一个具有 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

编辑：你这个笨拙的例子与我认为你所追求的结果非常不同。

【讨论】：

这也不会产生 OP 所期望的结果，但这主要是因为数据的结构不正确，无法以预期的方式显示。 ng-repeat 无法将平面数据变成嵌套数据。
您的代码会生成年份和月份的重复项。关于数据范围，我没有使用 $scope，建议阅读：toddmotto.com/…
如果你想要一个年份列表，有月份，然后是日期，你需要创建一个包含嵌套数组的数据结构。然后，您将能够在您所追求的每个级别上嵌套 ng-repeats。