基于angularjs中类型列的嵌套列表

Question

我有一个 angularjs sample here，其中包含一个示例数组

 $scope.myarr = [
{id: 1, name: 'foo',type: 1},
{id: 2,name: 'bar',type: 1},
{id: 3,name: 'quad',type: 2},
{id: 4,name: 'cab',type: 2},
{id: 5,name: 'baz',type: 2},
{id: 6,name: 'cad',type: 3}
];

我自己尝试使用ng-repeat 创建一个列表，可以这样做

<ul ng-repeat="x in myarr">
<li>{{x.id}}. {{x.name}} - Type {{x.type}}</li>
</ul>

但实际上想要的是一个基于x.type 列的嵌套列表，

1. 类型 1
   • 1。富
   • 2。酒吧
2. 类型 2
   • 3。四边形
   • 4。出租车
   • 5。巴兹
3. 类型 3
   • 6。 cad

如何使用angularjs来完成？

Answer 1

利用内部ng-repeat 和filter / unique

AngularJS 默认不包含唯一的过滤器。您可以使用角度过滤器中的一个。只需包含 JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>

并在您的应用中包含依赖项：

var app = angular.module('myApp', ['angular.filter']);

更多关于https://docs.angularjs.org/api/ng/directive/ngRepeat的信息

<div id="app" ng-app="myApp" ng-controller="myCtrl">
  <ul ng-repeat="x in myarr | unique:'type'">
      <li>{{x.id}}. {{x.name}} - Type {{x.type}}</li>
      <ul>
        <li ng-repeat="y in myarr | filter:type=x.id"> 
          {{y.name}}
        </li>   
      </ul>
  </ul>
</div>

angular.module('myApp', []).controller('myCtrl', function($scope) {
 $scope.myarr = [
    {id: 1, name: 'foo',type: 1},
    {id: 2,name: 'bar',type: 1},
    {id: 3,name: 'quad',type: 2},
    {id: 4,name: 'cab',type: 2},
    {id: 5,name: 'baz',type: 2},
    {id: 6,name: 'cad',type: 3}
  ];
});

将给出结果：

Type 1
    1. foo
    2. bar
Type 2
    3. quad
    4. cab
    5. baz
Type 3
    6. cad

查看更新后的Fiddle