AngularJS mesa
ng instrucción de repetición puede ser la forma perfecta visualización.
Visualizar los datos en una tabla
Pantalla utilizando el formulario angular es muy simple:
AngularJS ejemplos
<Div ng-app = "myApp " ng-controller = "customersCtrl">
<Tabla>
<Tr-ng repetición = "x en los nombres">
<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 (función (respuesta) {$ scope.names = response.records;});
});
</ Script>
<Tabla>
<Tr-ng repetición = "x en los nombres">
<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 (función (respuesta) {$ scope.names = response.records;});
});
</ Script>
Trate »
Usar estilos CSS
Con el fin de hacer la página más atractiva, podemos utilizar CSS en la página:
Estilos CSS
<Style>
mesa, th, td {
frontera: 1px sólido de color gris;
border-collapse: colapso;
padding: 5px;
}
mesa de tr: nth-child (impar ) {
background-color: # f1f1f1;
}
mesa de tr: nth-child (incluso ) {
background-color: #ffffff;
}
</ Style>
mesa, th, td {
frontera: 1px sólido de color gris;
border-collapse: colapso;
padding: 5px;
}
mesa de tr: nth-child (impar ) {
background-color: # f1f1f1;
}
mesa de tr: nth-child (incluso ) {
background-color: #ffffff;
}
</ Style>
Trate »
El uso de filtro orderBy
Ordenar pantalla, puede utilizar filtros orderBy:
AngularJS ejemplos
<Tabla>
<Tr-ng repetición = "x en los nombres | orderBy:" País "">
<Td> {{}} x.Name </ td>
<Td> {{}} x.Country </ td>
</ Tr>
</ Table>
<Tr-ng repetición = "x en los nombres | orderBy:" País "">
<Td> {{}} x.Name </ td>
<Td> {{}} x.Country </ td>
</ Tr>
</ Table>
Trate »
Use filtro de mayúsculas
Use filtro de mayúsculas a mayúsculas:
AngularJS ejemplos
<Tabla>
<Tr-ng repetición = "x en los nombres">
<Td> {{}} x.Name </ td>
<Td> {{x.Country | mayúsculas }} </ td>
</ Tr>
</ Table>
<Tr-ng repetición = "x en los nombres">
<Td> {{}} x.Name </ td>
<Td> {{x.Country | mayúsculas }} </ td>
</ Tr>
</ Table>
Trate »
número de pantalla ($ index)
Tabla muestra el número de serie se puede añadir en $ index <td> en:
AngularJS ejemplos
<Tabla>
<Tr-ng repetición = "x en los nombres">
<Td> {{$ index + 1}} </ td>
<Td> {{}} x.Name </ td>
<Td> {{}} x.Country </ td>
</ Tr>
</ Table>
<Tr-ng repetición = "x en los nombres">
<Td> {{$ index + 1}} </ td>
<Td> {{}} x.Name </ td>
<Td> {{}} x.Country </ td>
</ Tr>
</ Table>
Trate »
Utilice $ y $ siquiera extraña
AngularJS ejemplos
<Tabla>
<Tr-ng repetición = "x en los nombres">
<Td ng-if = "$ extraña" style = "background-color: # f1f1f1"> {{}} x.Name </ td>
<Td ng-if = "$ incluso"> {{}} x.Name </ td>
<Td ng-if = "$ extraña" style = "background-color: # f1f1f1"> {{}} x.Country </ td>
<Td ng-if = "$ incluso"> {{}} x.Country </ td>
</ Tr>
</ Table>
<Tr-ng repetición = "x en los nombres">
<Td ng-if = "$ extraña" style = "background-color: # f1f1f1"> {{}} x.Name </ td>
<Td ng-if = "$ incluso"> {{}} x.Name </ td>
<Td ng-if = "$ extraña" style = "background-color: # f1f1f1"> {{}} x.Country </ td>
<Td ng-if = "$ incluso"> {{}} x.Country </ td>
</ Tr>
</ Table>
Trate »