У мене є список гравців, які належать до групи. Як я можу використовувати фільтр для переліку користувачів у групі?
[{name: 'Gene', team: 'team alpha'},
{name: 'George', team: 'team beta'},
{name: 'Steve', team: 'team gamma'},
{name: 'Paula', team: 'team beta'},
{name: 'Scruath of the 5th sector', team: 'team gamma'}];
Я шукаю цей результат:
Відповіді:
Ви можете використовувати groupBy модуля angular.filter .
тож ви можете зробити щось подібне:
JS:
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
HTML:
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
Group name: {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
РЕЗУЛЬТАТ:
Назва групи: альфа
* плеєр: Джин
Назва групи: бета
* гравець: Джордж
* гравець: Паула
Назва групи: гамма
* плеєр: Стів
* гравець: Скруат
ОНОВЛЕННЯ: jsbin Запам’ятайте основні вимоги до використання angular.filter, зокрема зверніть увагу, що ви повинні додати його до залежностей свого модуля:
(1) Ви можете встановити кутовий фільтр, використовуючи 4 різні способи:
- клонуйте та складіть цей сховище
- через Bower: запустивши $ bower встановіть angular-filter з вашого терміналу
- через npm: запустивши $ npm встановіть angular-filter з вашого терміналу
- через cdnjs http://www.cdnjs.com/libraries/angular-filter
(2) Включіть angular-filter.js (або angular-filter.min.js) у свій index.html, після включення самого Angular.
(3) Додайте "angular.filter" до списку залежностей вашого основного модуля.
angular.filterмодуль.
keyяк об’єкт. будь-яка удача з вашого боку
На додаток до прийнятих відповідей вище, я створив загальний фільтр 'groupBy' за допомогою бібліотеки underscore.js.
JSFiddle (оновлено): http://jsfiddle.net/TD7t3/
Фільтр
app.filter('groupBy', function() {
return _.memoize(function(items, field) {
return _.groupBy(items, field);
}
);
});
Зверніть увагу на виклик "запам'ятати". Цей метод підкреслення кешує результат функції та зупиняє кутове оцінювання вираження фільтра кожного разу, запобігаючи таким чином, щоб кут не досягав межі ітерацій дайджесту.
Html
<ul>
<li ng-repeat="(team, players) in teamPlayers | groupBy:'team'">
{{team}}
<ul>
<li ng-repeat="player in players">
{{player.name}}
</li>
</ul>
</li>
</ul>
Ми застосовуємо наш фільтр "groupBy" до змінної області "teamPlayers" у властивості "team". Наше ng-повторення отримує комбінацію (ключ, значення []), яку ми можемо використовувати в наступних ітераціях.
Оновлення 11 червня 2014 р. Я розширив групу за допомогою фільтра для врахування використання виразів як ключа (наприклад, вкладених змінних). Для цього дуже зручна послуга кутового розбору:
Фільтр (із підтримкою вираження)
app.filter('groupBy', function($parse) {
return _.memoize(function(items, field) {
var getter = $parse(field);
return _.groupBy(items, function(item) {
return getter(item);
});
});
});
Контролер (з вкладеними об'єктами)
app.controller('homeCtrl', function($scope) {
var teamAlpha = {name: 'team alpha'};
var teamBeta = {name: 'team beta'};
var teamGamma = {name: 'team gamma'};
$scope.teamPlayers = [{name: 'Gene', team: teamAlpha},
{name: 'George', team: teamBeta},
{name: 'Steve', team: teamGamma},
{name: 'Paula', team: teamBeta},
{name: 'Scruath of the 5th sector', team: teamGamma}];
});
Html (з виразом sortBy)
<li ng-repeat="(team, players) in teamPlayers | groupBy:'team.name'">
{{team}}
<ul>
<li ng-repeat="player in players">
{{player.name}}
</li>
</ul>
</li>
JSFiddle: http://jsfiddle.net/k7fgB/2/
Спочатку зробіть цикл, використовуючи фільтр, який буде повертати лише унікальні команди, а потім вкладений цикл, який повертає всіх гравців у поточній команді:
http://jsfiddle.net/plantface/L6cQN/
html:
<div ng-app ng-controller="Main">
<div ng-repeat="playerPerTeam in playersToFilter() | filter:filterTeams">
<b>{{playerPerTeam.team}}</b>
<li ng-repeat="player in players | filter:{team: playerPerTeam.team}">{{player.name}}</li>
</div>
</div>
сценарій:
function Main($scope) {
$scope.players = [{name: 'Gene', team: 'team alpha'},
{name: 'George', team: 'team beta'},
{name: 'Steve', team: 'team gamma'},
{name: 'Paula', team: 'team beta'},
{name: 'Scruath of the 5th sector', team: 'team gamma'}];
var indexedTeams = [];
// this will reset the list of indexed teams each time the list is rendered again
$scope.playersToFilter = function() {
indexedTeams = [];
return $scope.players;
}
$scope.filterTeams = function(player) {
var teamIsNew = indexedTeams.indexOf(player.team) == -1;
if (teamIsNew) {
indexedTeams.push(player.team);
}
return teamIsNew;
}
}
Я спочатку використовував відповідь Plantface, але мені не сподобалося, як виглядав синтаксис на мій погляд.
Я переробив це для використання $ q.defer для обробки даних та повернення списку унікальних команд, який потім використовується як фільтр.
http://plnkr.co/edit/waWv1donzEMdsNMlMHBa?p=preview
<ul>
<li ng-repeat="team in teams">{{team}}
<ul>
<li ng-repeat="player in players | filter: {team: team}">{{player.name}}</li>
</ul>
</li>
</ul>
app.controller('MainCtrl', function($scope, $q) {
$scope.players = []; // omitted from SO for brevity
// create a deferred object to be resolved later
var teamsDeferred = $q.defer();
// return a promise. The promise says, "I promise that I'll give you your
// data as soon as I have it (which is when I am resolved)".
$scope.teams = teamsDeferred.promise;
// create a list of unique teams. unique() definition omitted from SO for brevity
var uniqueTeams = unique($scope.players, 'team');
// resolve the deferred object with the unique teams
// this will trigger an update on the view
teamsDeferred.resolve(uniqueTeams);
});
Обидва відповіді були хорошими, тому я перемістив їх до директиви, так що вона може бути повторно використана, а другу змінну області застосування не потрібно визначати.
Ось загадка, якщо ви хочете бачити її реалізованою
Нижче наведена директива:
var uniqueItems = function (data, key) {
var result = [];
for (var i = 0; i < data.length; i++) {
var value = data[i][key];
if (result.indexOf(value) == -1) {
result.push(value);
}
}
return result;
};
myApp.filter('groupBy',
function () {
return function (collection, key) {
if (collection === null) return;
return uniqueItems(collection, key);
};
});Тоді його можна використовувати наступним чином:
<div ng-repeat="team in players|groupBy:'team'">
<b>{{team}}</b>
<li ng-repeat="player in players | filter: {team: team}">{{player.name}}</li>
</div>Я спочатку написав цю відповідь, тому що стара версія рішення, запропонована Аріелем М. у поєднанні з іншими $filters, ініціювала " Нескінченну помилку циклу перекопувача $ " ( infdig) . На щастя, це питання було вирішено в останній версії angular.filter .
Я запропонував таку реалізацію, яка не мала цього питання :
angular.module("sbrpr.filters", [])
.filter('groupBy', function () {
var results={};
return function (data, key) {
if (!(data && key)) return;
var result;
if(!this.$id){
result={};
}else{
var scopeId = this.$id;
if(!results[scopeId]){
results[scopeId]={};
this.$on("$destroy", function() {
delete results[scopeId];
});
}
result = results[scopeId];
}
for(var groupKey in result)
result[groupKey].splice(0,result[groupKey].length);
for (var i=0; i<data.length; i++) {
if (!result[data[i][key]])
result[data[i][key]]=[];
result[data[i][key]].push(data[i]);
}
var keys = Object.keys(result);
for(var k=0; k<keys.length; k++){
if(result[keys[k]].length===0)
delete result[keys[k]];
}
return result;
};
});Однак ця реалізація працюватиме лише з версіями до Angular 1.3. (Я скоро оновлю цю відповідь, надаючи рішення, яке працює з усіма версіями.)
На додаток до прийнятої відповіді ви можете скористатися цією можливістю, якщо ви хочете згрупуватися за кількома стовпцями :
<ul ng-repeat="(key, value) in players | groupBy: '[team,name]'">Якщо вам це потрібно в коді js. Можна скористатися методом ін'єкцій, що містить вугільну фільтр-фільтр. Подобається це.
function controller($scope, $http, groupByFilter) {
var groupedData = groupByFilter(originalArray, 'groupPropName');
}https://github.com/a8m/angular-filter/wiki/Common-Questions#inject-filters