var app = angular.module('app', []);
app.controller('Ctrl',['$scope', function ($scope) {
$scope.employees=[
{Name:'Mark',Department:'HR',Id:1},
{Name:'Tim',Department:'Finance',Id:2},
{Name:'Frank',Department:'Administration',Id:3}
];
}]);
Затем мы можем отобразить вышеупомянутую коллекцию, используя ng-repeat. Далее будут отображаться свойства Name и Department для каждого сотрудника в div:\\
Name{{emp.Name}} Department {{emp.Department}} Id {{emp.Id}}
{{ :angular:angularjs:directive:ng-repeat-in-angularjs.png?400 |}}
Директивы ng-repeat-start и ng-repeat-end в AngularJS используются для отображения групп данных. Они используются для отображения разметки HTML для группы элементов.\\
\\
Вышеуказанный массив сотрудников имеет только три элемента, но реальное приложение может состоять из тысяч записей. Также в организации может быть много отделов. С помощью ng-repeat мы не сможем сгруппировать записи по определенным критериям, таким как Department.\\
\\
Для группировки данных в коллекции по определенному свойству angular 1.2 и более поздних версий предусмотрены директивы ng-repeat-start и ng-repeat-end. Используя эти директивы, мы можем легко сгруппировать данные в коллекции.\\
\\
Итак, основываясь на приведенном выше примере, но на этот раз с большим количеством записей мы определяем массив сотрудников как:\\
$scope.employees=[
{department:'Finance' ,employee:[
{Name:'Mark',Department:'HR',Id:1},
{Name:'Tim',Department:'Finance',Id:2},
{Name:'Frank',Department:'Administration',Id:3}
]
}
,
{department:'HR' ,employee:[
{"Name":"John", "Id":4},
{"Name":"Sam", "Id":5},
{"Name":"Ravi","Id":6}
]
}
,
{department:'Administration' ,employee:[
{"Name":"Ashish", "Id":7},
{"Name":"Peter", "Id":8},
{"Name":"Craig","Id":9}
]
}
]
Мы можем сгруппировать вышеупомянутые элементы в коллекции сотрудников, используя директивы ng-repeat-start и ng-repeat-end как:
{{e.department}}
Name{{emp.Name}} Id {{emp.Id}}
{{e.Name}}
Приведенная выше разметка отображает список сотрудников в таблице, сгруппированной по названию отдела\\
{{ :angular:angularjs:directive:ng-repeat-start-and-ng-repeat-end.png?400 |}}