Mesa angularjs
La directiva NG-Repeat puede mostrar tablas perfectamente.
Mostrar datos en la tabla
Es muy fácil usar las tablas Angulares para mostrar:
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <divphap-app = "myapp" ng "ng" ngcontrler " <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr></table></div><script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope, $ http) {$ http.get ("/try/angularjs/data/chows_json.php") .success (function (respuesta) {$ scope.names = respuesta.records;});}); </script> </body> </html>Resultados de ejecución:
| Alfreds Futterkiste | Alemania |
| Ana Trujillo Emparedados y Holdos | México |
| Antonio Moreno Taquería | México |
| Alrededor de la bocina | Reino Unido |
| Bebidas de B | Reino Unido |
| Berglunds snabbköp | Suecia |
| Blauer ver Delikatessen | Alemania |
| Blondel Père et fils | Francia |
| Bólido Comidas preparado | España |
| Aplicación BON ' | Francia |
| Marketse de dólar inferior | Canadá |
| Cactus comidas para lllevar | Argentina |
| Moctezuma de centro comercial | México |
| Chino-suey chino | Suiza |
| Comércio mineiro | Brasil |
Usando estilos CSS
Para que la página sea más hermosa, podemos usar CSS en la página:
Estilo CSS
</ystye> </head> <body> <div ng-app = "myApp" ng-confontroller = "customersctrl"> <table> <tr ng-depeat = "x in names"> <td> {{x.name}} </td> <td> {{{x.country}} </td> </tr> </table> angular.module ('myApp', []); app.controller ('customersCtrl', function ($ scope, $ http) {$ http.get ("http://www.runoob.com/try/angularjs/data/customers_json.php") .sucess (function (function) {$ scope.names Response.Records;});}); </script> </body> </html>Resultados de ejecución:
| Alfreds Futterkiste | Alemania |
| Ana Trujillo Emparedados y Holdos | México |
| Antonio Moreno Taquería | México |
| Alrededor de la bocina | Reino Unido |
| Bebidas de B | Reino Unido |
| Berglunds snabbköp | Suecia |
| Blauer ver Delikatessen | Alemania |
| Blondel Père et fils | Francia |
| Bólido Comidas preparado | España |
| Aplicación BON ' | Francia |
| Marketse de dólar inferior | Canadá |
| Cactus comidas para lllevar | Argentina |
| Moctezuma de centro comercial | México |
| Chino-suey chino | Suiza |
| Comércio mineiro | Brasil |
Use el filtro de pedidos
SILLO PANTALLA, puede usar el filtro de pedidos:
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <syle> table, th, td {borde: 1px sólido sólido; Colapso de borde: colapso; PLATING: 5PX;} TABLA TR: NTH-Child (ODD) {Background-Color: #F1F1F1;} Table TR: NTH-Child (incluso) {Background-Color: #FFFFFF;} </style> </head> <body> <div ng-app = "myApp" ng-concroller = "clientsctrl"> <table> <tr ng-repeat = "x inames | inames | '' País '"> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> </div> <script> var app = angular.module (' myapp ', []); app.controller (' clustsCtrl ', function ($ scope, $ http) { $ http.get ("/try/angularjs/data/customers_json.php") .success (function (respuesta) {$ scope.names = respuesta.records;});}); </script> </body> </html>Efecto de ejecución:
| Cactus comidas para lllevar | Argentina |
| Comércio mineiro | Brasil |
| Marketse de dólar inferior | Canadá |
| Blondel Père et fils | Francia |
| Aplicación BON ' | Francia |
| Alfreds Futterkiste | Alemania |
| Blauer ver Delikatessen | Alemania |
| Ana Trujillo Emparedados y Holdos | México |
| Antonio Moreno Taquería | México |
| Moctezuma de centro comercial | México |
| Bólido Comidas preparado | España |
| Berglunds snabbköp | Suecia |
| Chino-suey chino | Suiza |
| Alrededor de la bocina | Reino Unido |
| Bebidas de B | Reino Unido |
Utilice el filtro mayúscula
Use el filtro mayúscula para convertir a mayúsculas:
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <syle> table, th, td {borde: 1px sólido sólido; Colapso de borde: colapso; relleno: 5px;} tabla tr: nth-child (impar) {background-color: #f1f1f1;} tabla tr: nth-child (incluso) {background-color: #ffffff;} </style> </head> <body> <divng-app = "myapp" ng-concroller = "clientsctrl"> <play> <tr ng-repeat = "x ines" <TD> {{x.name}} </td> <td> {{x.country | uppercase}} </td> </tr> </table> </div> <script> var app = angular.module ('myApp', []); app.controller ('customersctrl', function ($ scope, $ http) {$ http.get ("/try/angularjs/data/científicos_json.php"). {$ scope.names = Response.Records;});}); </script> </body> </html>Efecto de ejecución:
| Alfreds Futterkiste | ALEMANIA |
| Ana Trujillo Emparedados y Holdos | MÉXICO |
| Antonio Moreno Taquería | MÉXICO |
| Alrededor de la bocina | Reino Unido |
| Bebidas de B | Reino Unido |
| Berglunds snabbköp | SUECIA |
| Blauer ver Delikatessen | ALEMANIA |
| Blondel Père et fils | FRANCIA |
| Bólido Comidas preparado | ESPAÑA |
| Aplicación BON ' | FRANCIA |
| Marketse de dólar inferior | CANADÁ |
| Cactus comidas para lllevar | Argentina |
| Moctezuma de centro comercial | MÉXICO |
| Chino-suey chino | SUIZA |
| Comércio mineiro | BRASIL |
Mostrar número de serie (índice $)
El número de serie de la pantalla de la tabla se puede agregar $ índice en <TD>:
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <syle> table, th, td {borde: 1px sólido sólido; Colapso de borde: colapso; relleno: 5px;} tabla tr: nth-child (impar) {background-color: #f1f1f1;} tabla tr: nth-child (incluso) {background-color: #ffffff;} </style> </head> <body> <divng-app = "myapp" ng-concroller = "clientsctrl"> <play> <tr ng-repeat = "x ines" <td>{{ $index + 1 }}</td> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr></table></div><script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope, $ http) {$ http.get ("/try/angularjs/data/chows_json.php") .success (function (respuesta) {$ scope.names = respuesta.records;});}); </script> </body> </html>Efecto de ejecución:
| 1 | Alfreds Futterkiste | Alemania |
| 2 | Ana Trujillo Emparedados y Holdos | México |
| 3 | Antonio Moreno Taquería | México |
| 4 | Alrededor de la bocina | Reino Unido |
| 5 | Bebidas de B | Reino Unido |
| 6 | Berglunds snabbköp | Suecia |
| 7 | Blauer ver Delikatessen | Alemania |
| 8 | Blondel Père et fils | Francia |
| 9 | Bólido Comidas preparado | España |
| 10 | Aplicación BON ' | Francia |
| 11 | Marketse de dólar inferior | Canadá |
| 12 | Cactus comidas para lllevar | Argentina |
| 13 | Moctezuma de centro comercial | México |
| 14 | Chino-suey chino | Suiza |
| 15 | Comércio mineiro | Brasil |
Usar $ Even y $ Odd
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <style> table, td {border: 1px sólido gris; Colapso de borde: colapso; relleno: 5px;} </ystye> </head> <body> <div ng-app = "myApp" ng-Controller = "CLIENTSCTRL"> <TABETRO> <TR NG-Repeat = "X in Names"> <td ng-if = "$ oDD" style = "Color de fondo:#F1F1F1"> {{{{x.name}}}}}} <td> ng-if = "$ incluso"> {{x.name}} </td> <td ng-if = "$ impark" style = "de fondo de fondo:#f1f1f1"> {{x.Country}} </td> <td ng-if = "$ incluso"> {{x.country}} </td>>> </tr> </bable> </div> <script> var app = angular.module ('myApp', []); app.controller ('customersCtrl', function ($ scope, $ http) {$ http.get ("/try/angularjs/data/customs_json.php") .sucess (función (respuesta) {$ scope.names. Response.Records;});}); </script> </body> </html>Efecto de ejecución:
| Alfreds Futterkiste | Alemania |
| Ana Trujillo Emparedados y Holdos | México |
| Antonio Moreno Taquería | México |
| Alrededor de la bocina | Reino Unido |
| Bebidas de B | Reino Unido |
| Berglunds snabbköp | Suecia |
| Blauer ver Delikatessen | Alemania |
| Blondel Père et fils | Francia |
| Bólido Comidas preparado | España |
| Aplicación BON ' | Francia |
| Marketse de dólar inferior | Canadá |
| Cactus comidas para lllevar | Argentina |
| Moctezuma de centro comercial | México |
| Chino-suey chino | Suiza |
| Comércio mineiro | Brasil |
Lo anterior es una compilación de los materiales de forma angularjs, y continuaremos agregándolos más tarde. Espero que pueda ayudar a los estudiantes necesitados.