У меня есть образец angularjs, где он содержит массив образцов
$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
,
Как это можно сделать, используя angularjs?
Использование внутреннего 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