=====Директива ng-repeat=====
Директива **ng-repeat** позволяет производить обход массивов в стиле цикла for-each и генерировать для них элементы html. Например, при рассмотрении контроллеров мы создали контроллер **phoneController**. Изменим его так, чтобы он передавал в представление массив:
Цена: {{phone.price}} $ Производитель: {{phone.company.name}}
var myApp=angular.module('myApp');
myApp.controller('phoneController', function($scope) {
$scope.phones = [{
name: 'Nokia Lumia 630',
year: 2014,
price: 200,
company: {
name: 'Nokia',
country: 'Финляндия'
}
},{
name: 'Samsung Galaxy S 4',
year: 2014,
price: 400,
company: {
name: 'Samsung',
country: 'Республика Корея'
}
},{
name: 'Mi 5',
year: 2015,
price: 300,
company: {
name: 'Xiaomi',
country: 'Китай'
}
}]
});
И чтобы вывести все элементы массива, применим директиву **ng-repeat**:
В данном случае с помощью выражения //
Id
Модель
Цена
{{$index + 1}}
{{phone.name}}
{{phone.price}}
{{:angular:angularjs:directive:repeat2.png?400|}}
====Обход внутренних массивов====
Возможна ситуация, когда объект в массиве, в свою очередь, сам содержит массив, и этот массив тоже надо обойти. В этом случае можно использовать вложеные директивы ng-repeat. Например, весь объект выглядит так:
$scope.phones = [{
name: 'Nokia',
models:[{
name: "Nokia Lumia 530",
price: 150
},{
name: "Nokia X2",
price: 200
}]
},{
name: 'Samsung',
models:[{
name: "Samsung Galaxy S5",
price: 500
},{
name: "Samsung Galaxy Alpha",
price: 400
}]
}]
});
Для вывода вложенного массива можно использовать следующий код:
-
{{company.name}}
{{model.name}}
Цена: {{model.price}} $