angular:angularjs:directive:ng-repeat-start_and_ng-repeat-end []

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
=====ng-repeat-start и ng-repeat-end=====

AngularJS упрощает реализацию общих задач привязки данных. Мы устанавливаем модель представления для нашего приложения, используя $scope в контроллере, и обращаемся к ней в view .AngularJS автоматически обновляет представление при изменении значения $scope.\\
\\

Одной из общих функций является перебор коллекции элементов. Мы можем легко реализовать этот сценарий с помощью директивы ng-repeat. Директива ng-repeat создает шаблон HTML для каждого элемента в коллекции элементов.\\
\\
Поэтому вместо того, чтобы манипулировать HTML-кодом с помощью JavaScript, мы просто указываем, какой шаблон нам нужен для элемента в коллекции. Например, если у нас есть коллекция элементов, определенная как:\\

<code javascript>
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}
];
}]);
</code>

Затем мы можем отобразить вышеупомянутую коллекцию, используя ng-repeat. Далее будут отображаться свойства Name и Department для каждого сотрудника в div:\\
<code html>
<div ng-repeat="emp in e.employee">
<i>Name</i>{{emp.Name}} <i>Department</i> {{emp.Department}} <i>Id</i> {{emp.Id}}
</div>
</code>

{{ :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. Используя эти директивы, мы можем легко сгруппировать данные в коллекции.\\
\\
Итак, основываясь на приведенном выше примере, но на этот раз с большим количеством записей мы определяем массив сотрудников как:\\
<code javascript>
$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}
  ]
 }

]
</code>

Мы можем сгруппировать вышеупомянутые элементы в коллекции сотрудников, используя директивы ng-repeat-start и ng-repeat-end как:
<code html>
<table ng-app="app" ng-controller="Ctrl">
<tr ng-repeat-start="e in employees">
<td> <b> {{e.department}} </b></td>

<td>
</tr>
<tr ng-repeat="emp in e.employee">
<td > Name{{emp.Name}} Id {{emp.Id}} </td>
</tr>
<tr ng-repeat-end>
<td> {{e.Name}} </td>
</tr>
</table>
</code>

Приведенная выше разметка отображает список сотрудников в таблице, сгруппированной по названию отдела\\
{{ :angular:angularjs:directive:ng-repeat-start-and-ng-repeat-end.png?400 |}}
Инструменты пользователя

Инструменты сайта

Инструменты страницы
