El mejor tutorial de AngularJS mesa en 2024. En este tutorial podrás aprender
Visualizar los datos en una tabla,AngularJS ejemplos,Usar estilos CSS,Estilos CSS,El uso de filtro orderBy,AngularJS ejemplos,Use filtro de mayúsculas,AngularJS ejemplos,número de pantalla ($ index),AngularJS ejemplos,Utilice $ y $ siquiera extraña,AngularJS ejemplos,
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.w3write.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>
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>
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>
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>
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>
Trate »