Вложенный список на основе типа столбца в angularjs

0

У меня есть образец 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,

  1. Тип 1
    • 1. foo
    • 2. бар
  2. Тип 2
    • 3. quad
    • 4. Кабина
    • 5. база
  3. Тип 3
    • 6. cad

Как это можно сделать, используя angularjs?

Теги:
arrays
list

1 ответ

2
Лучший ответ

Использование внутреннего 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

  • 0
    Обновленная скрипка не работает?
  • 0
    Я повторно разветвил - эта ссылка работает? jsfiddle.net/2y460yvp или ты имеешь ввиду что-то еще с неработающим?
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню