tabel AngularJS
instruksi ng-ulang bisa menjadi bentuk tampilan yang sempurna.
Tampilan data dalam tabel
Tampilan menggunakan formulir sudut sangat sederhana:
AngularJS contoh
<Div ng-app = "myApp " ng-controller = "customersCtrl">
<Table>
<Tr ng-repeat = "x dalam nama">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
</ Div>
<Script>
var aplikasi = angular.module ( 'myApp', []);
app.controller ( 'customersCtrl', function ($ lingkup, $ http) {
$ Http.get ( "http://www.w3big.com/try/angularjs/data/Customers_JSON.php")
.success (function (respon) {$ scope.names = response.records;});
});
</ Script>
<Table>
<Tr ng-repeat = "x dalam nama">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
</ Div>
<Script>
var aplikasi = angular.module ( 'myApp', []);
app.controller ( 'customersCtrl', function ($ lingkup, $ http) {
$ Http.get ( "http://www.w3big.com/try/angularjs/data/Customers_JSON.php")
.success (function (respon) {$ scope.names = response.records;});
});
</ Script>
Coba »
Menggunakan gaya CSS
Dalam rangka untuk membuat halaman lebih menarik, kita bisa menggunakan CSS di halaman:
Styles CSS
<Style>
meja, th, td {
border: abu-abu padat 1px;
border-collapse: collapse;
padding: 5px;
}
table tr: n-anak (aneh ) {
background-color: # f1f1f1;
}
table tr: n-anak (bahkan ) {
background-color: #ffffff;
}
</ Style>
meja, th, td {
border: abu-abu padat 1px;
border-collapse: collapse;
padding: 5px;
}
table tr: n-anak (aneh ) {
background-color: # f1f1f1;
}
table tr: n-anak (bahkan ) {
background-color: #ffffff;
}
</ Style>
Coba »
Gunakan orderby penyaring
display semacam, Anda dapat menggunakan orderby filter:
AngularJS contoh
<Table>
<Tr ng-repeat = "x dalam nama | orderby: 'Negara'">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x dalam nama | orderby: 'Negara'">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
Coba »
Menggunakan filter huruf besar
Menggunakan filter huruf besar ke huruf besar:
AngularJS contoh
<Table>
<Tr ng-repeat = "x dalam nama">
<Td> {{x.Name}} </ td>
<Td> {{x.Country | huruf }} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x dalam nama">
<Td> {{x.Name}} </ td>
<Td> {{x.Country | huruf }} </ td>
</ Tr>
</ Table>
Coba »
nomor tampilan ($ index)
Tabel menunjukkan nomor seri dapat ditambahkan pada $ index <td> di:
AngularJS contoh
<Table>
<Tr ng-repeat = "x dalam nama">
<Td> {{$ index + 1}} </ td>
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x dalam nama">
<Td> {{$ index + 1}} </ td>
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
Coba »
Gunakan bahkan $ dan $ aneh
AngularJS contoh
<Table>
<Tr ng-repeat = "x dalam nama">
<Td ng-if = "$ aneh" style = "background-color: # f1f1f1"> {{x.Name}} </ td>
<Td ng-if = "$ bahkan"> {{x.Name}} </ td>
<Td ng-if = "$ aneh" style = "background-color: # f1f1f1"> {{x.Country}} </ td>
<Td ng-if = "$ bahkan"> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x dalam nama">
<Td ng-if = "$ aneh" style = "background-color: # f1f1f1"> {{x.Name}} </ td>
<Td ng-if = "$ bahkan"> {{x.Name}} </ td>
<Td ng-if = "$ aneh" style = "background-color: # f1f1f1"> {{x.Country}} </ td>
<Td ng-if = "$ bahkan"> {{x.Country}} </ td>
</ Tr>
</ Table>
Coba »