AngularJS mesa
instruções ng-repeat pode ser a forma de exibição perfeita.
exibir dados em uma tabela
Exibição usando forma angular é muito simples:
AngularJS exemplos
<Div ng-app = "myApp " ng-controller = "customersCtrl">
<Table>
<Tr ng-repeat = "x em nomes">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'customersCtrl', function ($ âmbito, $ http) {
$ Http.get ( "http://www.w3big.com/try/angularjs/data/Customers_JSON.php")
.success (function (response) {$ scope.names = response.records;});
});
</ Script>
<Table>
<Tr ng-repeat = "x em nomes">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'customersCtrl', function ($ âmbito, $ http) {
$ Http.get ( "http://www.w3big.com/try/angularjs/data/Customers_JSON.php")
.success (function (response) {$ scope.names = response.records;});
});
</ Script>
tente »
Use estilos CSS
A fim de tornar a página mais atraente, podemos usar CSS na página:
Estilos CSS
<Style>
tabela, th, td {
border: cinza 1px solid;
border-collapse: colapso;
padding: 5px;
}
mesa de tr: nth-child (ímpar ) {
background-color: # f1f1f1;
}
mesa de tr: nth-child (mesmo ) {
background-color: #ffffff;
}
</ Style>
tabela, th, td {
border: cinza 1px solid;
border-collapse: colapso;
padding: 5px;
}
mesa de tr: nth-child (ímpar ) {
background-color: # f1f1f1;
}
mesa de tr: nth-child (mesmo ) {
background-color: #ffffff;
}
</ Style>
tente »
Use filtro orderBy
Ordenar exibição, você pode usar filtros orderBy:
AngularJS exemplos
<Table>
<Tr ng-repeat = "x em nomes | orderBy: 'País'">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x em nomes | orderBy: 'País'">
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
tente »
Use filtro de letras maiúsculas
Use filtro de letras maiúsculas para maiúsculas:
AngularJS exemplos
<Table>
<Tr ng-repeat = "x em nomes">
<Td> {{x.Name}} </ td>
<Td> {{x.Country | maiúscula }} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x em nomes">
<Td> {{x.Name}} </ td>
<Td> {{x.Country | maiúscula }} </ td>
</ Tr>
</ Table>
tente »
Mostrar número ($ index)
A tabela mostra o número de série podem ser adicionados a $ index <td> em:
AngularJS exemplos
<Table>
<Tr ng-repeat = "x em nomes">
<Td> {{$ index + 1}} </ td>
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x em nomes">
<Td> {{$ index + 1}} </ td>
<Td> {{x.Name}} </ td>
<Td> {{x.Country}} </ td>
</ Tr>
</ Table>
tente »
Use $ mesmo e US $ estranho
AngularJS exemplos
<Table>
<Tr ng-repeat = "x em nomes">
<Td ng-se = "$ ímpar" style = "background-color: # f1f1f1"> {{x.Name}} </ td>
<Td ng-se = "$ sequer"> {{x.Name}} </ td>
<Td ng-se = "$ ímpar" style = "background-color: # f1f1f1"> {{x.Country}} </ td>
<Td ng-se = "$ sequer"> {{x.Country}} </ td>
</ Tr>
</ Table>
<Tr ng-repeat = "x em nomes">
<Td ng-se = "$ ímpar" style = "background-color: # f1f1f1"> {{x.Name}} </ td>
<Td ng-se = "$ sequer"> {{x.Name}} </ td>
<Td ng-se = "$ ímpar" style = "background-color: # f1f1f1"> {{x.Country}} </ td>
<Td ng-se = "$ sequer"> {{x.Country}} </ td>
</ Tr>
</ Table>
tente »