AngularJS стол
нг-повтора команд может быть совершенной формой отображения.
Отображение данных в таблице
Дисплей с помощью угловой формы очень прост:
AngularJS примеры
<Div нг-приложение = "MyApp " нг-контроллер = "customersCtrl">
<Таблица>
<Tr нг-повтор = "х в именах">
<Td> {{x.Name}} </ TD>
<Td> {{x.Country}} </ TD>
</ TR>
</ Table>
</ Div>
<Script>
вар приложение = angular.module ( 'MYAPP', []);
app.controller ( 'customersCtrl', функция ($ сфера, $ HTTP) {
$ Http.get ( "http://www.w3big.com/try/angularjs/data/Customers_JSON.php")
.success (функция (ответ) {$ scope.names = response.records;});
});
</ Script>
<Таблица>
<Tr нг-повтор = "х в именах">
<Td> {{x.Name}} </ TD>
<Td> {{x.Country}} </ TD>
</ TR>
</ Table>
</ Div>
<Script>
вар приложение = angular.module ( 'MYAPP', []);
app.controller ( 'customersCtrl', функция ($ сфера, $ HTTP) {
$ Http.get ( "http://www.w3big.com/try/angularjs/data/Customers_JSON.php")
.success (функция (ответ) {$ scope.names = response.records;});
});
</ Script>
Попробуйте »
Использование стилей CSS
Для того, чтобы сделать страницу более привлекательной, мы можем использовать CSS в странице:
Стили CSS
<Стиль>
стол, й, тд {
границы: 1px твердый серый;
границы коллапса: крах;
обивка: 5px;
}
Таблица ТР: п-й ребенок (нечетные ) {
цвет фона: # f1f1f1;
}
Таблица ТР: п-й ребенок (даже ) {
фонового цвета: #ffffff;
}
</ Стиль>
стол, й, тд {
границы: 1px твердый серый;
границы коллапса: крах;
обивка: 5px;
}
Таблица ТР: п-й ребенок (нечетные ) {
цвет фона: # f1f1f1;
}
Таблица ТР: п-й ребенок (даже ) {
фонового цвета: #ffffff;
}
</ Стиль>
Попробуйте »
Используйте OrderBy фильтр
Сортировка дисплей, вы можете использовать фильтры OrderBy:
AngularJS примеры
<Таблица>
<Tr нг-повтор = "х в названиях | OrderBy: 'Страна'">
<Td> {{x.Name}} </ TD>
<Td> {{x.Country}} </ TD>
</ TR>
</ Table>
<Tr нг-повтор = "х в названиях | OrderBy: 'Страна'">
<Td> {{x.Name}} </ TD>
<Td> {{x.Country}} </ TD>
</ TR>
</ Table>
Попробуйте »
Использование фильтра верхнего регистра
Используйте фильтр верхнего регистра в верхний регистр:
AngularJS примеры
<Таблица>
<Tr нг-повтор = "х в именах">
<Td> {{x.Name}} </ TD>
<Td> {{x.Country | верхний регистр }} </ TD>
</ TR>
</ Table>
<Tr нг-повтор = "х в именах">
<Td> {{x.Name}} </ TD>
<Td> {{x.Country | верхний регистр }} </ TD>
</ TR>
</ Table>
Попробуйте »
номер дисплея ($ индекс)
Таблица показывает серийный номер может быть добавлен в $ индекс <TD> в:
AngularJS примеры
<Таблица>
<Tr нг-повтор = "х в именах">
<Td> {{$ индекс + 1}} </ TD>
<Td> {{x.Name}} </ TD>
<Td> {{x.Country}} </ TD>
</ TR>
</ Table>
<Tr нг-повтор = "х в именах">
<Td> {{$ индекс + 1}} </ TD>
<Td> {{x.Name}} </ TD>
<Td> {{x.Country}} </ TD>
</ TR>
</ Table>
Попробуйте »
Используйте $ даже и $ нечетным
AngularJS примеры
<Таблица>
<Tr нг-повтор = "х в именах">
<Td нг-если = "$ нечетное" стиль = "цвет фона: # f1f1f1"> {{x.Name}} </ TD>
<Td нг-если = "$ даже"> {{x.Name}} </ TD>
<Td нг-если = "$ нечетное" стиль = "цвет фона: # f1f1f1"> {{x.Country}} </ TD>
<Td нг-если = "$ даже"> {{x.Country}} </ TD>
</ TR>
</ Table>
<Tr нг-повтор = "х в именах">
<Td нг-если = "$ нечетное" стиль = "цвет фона: # f1f1f1"> {{x.Name}} </ TD>
<Td нг-если = "$ даже"> {{x.Name}} </ TD>
<Td нг-если = "$ нечетное" стиль = "цвет фона: # f1f1f1"> {{x.Country}} </ TD>
<Td нг-если = "$ даже"> {{x.Country}} </ TD>
</ TR>
</ Table>
Попробуйте »