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

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

Answer 2

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

类似

ng-repeat被添加到html的元素中。您还可以添加一些“关键字”，例如orderBy和“unique”来操纵输出由角度处理的方式。

对于<li>中的每个json对象，将重复嵌套在重复data内的每个元素。此数据将其年，月和项值写入{{}}包含值的页面。例如{{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>

在提出问题之前，您需要做更多的研究。你基本上只是要求别人为你写代码。即使你要复制我或其他任何人给你的东西，我也不认为你对角度有了实际的实现。请花更多时间学习角度，你会发现它实际上很容易！

以下是有关ng-repeat的一些资源要检查;

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

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

编辑：您的插图示例与我以为您追求的结果非常不同。

ng-repeat嵌套HTML元素

2 个答案: