Split нг-повтора на основе свойства объекта

Я использую ng-repeat на массив объектов, подобных этим:Split нг-повтора на основе свойства объекта

var objects = [ 
    { 
    name: 'test', 
    id: 1234, 
    category: 'a' 
    }, 
    { 
    name: 'sample', 
    id: 4567, 
    category: 'b' 
    }, 
    { 
    name: 'example', 
    id: 7890, 
    category: 'a' 
    }, ... 
]; 

<p ng-repeat="object in objects">{{object.name}}<p>

Этот массив содержит более десятка объектов с 4 различных категорий. То, что я хочу сделать, это разделить эти объекты в моем UI, чтобы отобразить каждый под своей категории рубрикой:

Категория: испытание пример Категория: б образца

Есть ли способ сделать это с один ng-repeat? Мое настоящее мышление заключается в том, что мне нужно разделить его на четыре одинаковых ng-repeat с на основе данных, которые я классифицирую отдельно в своем контроллере. Просто надеясь, что есть способ DRYER для этого.

источник

2015-11-05 MattDionis

Plz добавить 'нг-repeat' шаблон на вопрос, и да, это может быть сделано – vinayakj

@vinayakj Обновлены с примером очень простой' нг-repeat' я в настоящее время работаю. – MattDionis

Пожалуйста, перейдите по этой ссылке, http://stackoverflow.com/questions/23493063/angular-ng-repeat-conditional-wrap-items-in-element-group-items-in-ng-repeat – vinayakj

Working PLUNKER

Чтобы решить эту проблему, я использую два угловых «фильтры», OrderBy, получающих свойство объекта AN сорт, что объект, основанный на этом. Второй - это 'Filter filter', который получает массив, выполняет некоторую операцию и отправляет ее обратно. Я использую ваш объект как $ scope.things.

Markup:

<body ng-app="app" ng-controller="ctrl"> 
    <div ng-repeat="thing in things | orderBy: 'category' | thingsFilter"> 
     <p>{{thing}} </p> 
    </div> 

    <h1>Hello Plunker!</h1> 
    </body>

Во-первых, я использую OrderBy, который будет заказывать массивом на основе things.category собственности. Затем, с упорядоченным массивом, я применяю угловой пользовательский фильтр.

app.js

app.filter('thingsFilter', function() { 
    return function (things) { 
    var filtered = []; //Return array. 
    for (var i=0; i< things.length; i++){ //Iterate over things. 
     if (i > 0) { //To make sure I won't compare with things[-1] 
     if ((things[i].category) != (things[i-1].category)) { 
      //If category of last item is different, add the name of category. 
      filtered.push("_____CATEGORY: " + things[i].category + ":"); 
     } 
     } else { //Insert the first category. 
     filtered.push("_____CATEGORY: " + things[i].category + ":"); 
     }; 
     console.log(things[i]); //Just to see what is happening. 
     filtered.push(things[i].name); //Inserting the name of the thing. 
    }; 
    console.log(filtered); //The final array to 
    return filtered;  //be returned here. 
    }; 
});

На вход фильтра является то, объект, который был заказан OrderBy. Итак, у меня есть массив ORDERED. Теперь я создал фильтрованную переменную, в которой будет сохранено все значение, которое будет отправлено обратно.

Далее я ищу, чтобы увидеть, является ли переменная i больше нуля, поэтому я не буду сравнивать с отрицательным индексом и ошибка моего кода. Если индекс равен нулю, я добавлю строку категории.

Поскольку массив упорядочен, я могу проверить, отличается ли категория последнего массива от фактического. Если это так, я добавлю категорию в массив с помощью filter.push («____ CATEGORY ...»).

В конце каждого цикла цикла я буду выталкивать вещи [i] .name в возвращаемый массив. И, в конце, я верну фильтр, поэтому мой ng-repeat сможет его использовать.

Working PLUNKER

источник

2015-11-05 20:56:27 Rodmentou

Split нг-повтора на основе свойства объекта

ответ

Смежные вопросы