Tabela de AngularJS
A diretiva NG-REPEAT pode exibir tabelas perfeitamente.
Exibir dados na tabela
É muito fácil de usar as tabelas Angular para exibir:
Instância 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> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-Controller = "CustomerCtrl"> <table> <tr ng-repeat = "X em nomes"> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </tabela> </div> <script> vars = APP = ANG. []); App.Controller ('CustomerCtrl', function ($ SCOPE, $ HTTP) {$ http.get ("/try/angularjs/data/clients_json.php") .success (function (resposta) {$ scope.names = resposta.Records;Resultados em execução:
| Alfreds Futterkiste | Alemanha |
| Ana Trujillo Emparedados y Holdos | México |
| Antonio Moreno Taquería | México |
| Ao redor da buzina | Reino Unido |
| Bebidas de B. | Reino Unido |
| Berglunds Snabbköp | Suécia |
| Blauer Veja Delikatessen | Alemanha |
| Blondel Père et fils | França |
| Bólido Comidas preparado | Espanha |
| Bon App ' | França |
| Marketse de dólar de fundo | Canadá |
| Cactus Comidas para Llevar | Argentina |
| Centro Comercial Moctezuma | México |
| Chinês chinês | Suíça |
| Comércio mineiro | Brasil |
Usando estilos CSS
Para tornar a página mais bonita, podemos usar o CSS na página:
Estilo CSS
</style> </ad Head> <body> <div ng-App = "MyApp" ng-CONTROLLER = "CustomerCtrl"> <tabela> <tr ng-repeat = "X Names"> <td> {{x.name}} </td> <td> {{x.country}}} angular.module ('myApp', []); App.Controller ('CustomerCtrl', função ($ SCOPE, $ http) {$ http.get ("http://www.runoob.com/try/angularjs/data/customers_json.runoob.com/try/angularjs/data/customers_json.runoob.com/try/angularjs/data/customers_json.php.) Response.Records;});}); </script> </body> </html>Resultados em execução:
| Alfreds Futterkiste | Alemanha |
| Ana Trujillo Emparedados y Holdos | México |
| Antonio Moreno Taquería | México |
| Ao redor da buzina | Reino Unido |
| Bebidas de B. | Reino Unido |
| Berglunds Snabbköp | Suécia |
| Blauer Veja Delikatessen | Alemanha |
| Blondel Père et fils | França |
| Bólido Comidas preparado | Espanha |
| Bon App ' | França |
| Marketse de dólar de fundo | Canadá |
| Cactus Comidas para Llevar | Argentina |
| Centro Comercial Moctezuma | México |
| Chinês chinês | Suíça |
| Comércio mineiro | Brasil |
Use o filtro do pedido
Classifique a exibição, você pode usar o filtro Orderby:
Instância 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> <estilo> tabela, th, td, td {thp {throttle.min.js "> </script> <estilo>, th; colapso da fronteira: colapso; preenchimento: 5px;} tabela tr: nth-child (ímpar) {background-color: #f1f1f1;} tabela tr: nth-child (par) {background-color: #fffff;} </style> </head> <body> <div ng-App = "myApp" ng-controller = "Customerctrl>"> 'Country' "> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </ table> </div> <cript> var app = angular.module ('myApp', []); app.Critt> $ http.get ("/try/angularjs/data/clientes_json.php") .success (function (resposta) {$ scope.names = Response.records;});}); </script> </body> </html>Efeito de corrida:
| Cactus Comidas para Llevar | Argentina |
| Comércio mineiro | Brasil |
| Marketse de dólar de fundo | Canadá |
| Blondel Père et fils | França |
| Bon App ' | França |
| Alfreds Futterkiste | Alemanha |
| Blauer Veja Delikatessen | Alemanha |
| Ana Trujillo Emparedados y Holdos | México |
| Antonio Moreno Taquería | México |
| Centro Comercial Moctezuma | México |
| Bólido Comidas preparado | Espanha |
| Berglunds Snabbköp | Suécia |
| Chinês chinês | Suíça |
| Ao redor da buzina | Reino Unido |
| Bebidas de B. | Reino Unido |
Use filtro em maiúsculas
Use o filtro de maiúsculas para converter em maiúsculas:
Instância 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> <estilo> tabela, th, td, td {thp {throttle.min.js "> </script> <estilo>, th; colapso da fronteira: colapso; preenchimento: 5px;} tabela tr: nth-child (ímpar) {background-color: #f1f1f1;} tabela tr: nth-child (par) {background-color: #ffffff;} </style> </head> <body> <div ng-app = "myApp-controll (" "> </body> <body> <body> <ng-App =" myApp "ng-controll" = "Customerctrl>"> <td> {{x.name}} </td> <td> {{x.country | uppercase}} </td> </tr> </bit> </div> <cript> var app = angular.module ('myApp', []); app.Controller ('Customerctrl', function ($ scope, $ http) {$ http.get ("/try/angularJs {$ scope.names = Response.records;});}); </sCript> </body> </html>Efeito de corrida:
| Alfreds Futterkiste | ALEMANHA |
| Ana Trujillo Emparedados y Holdos | MÉXICO |
| Antonio Moreno Taquería | MÉXICO |
| Ao redor da buzina | Reino Unido |
| Bebidas de B. | Reino Unido |
| Berglunds Snabbköp | SUÉCIA |
| Blauer Veja Delikatessen | ALEMANHA |
| Blondel Père et fils | FRANÇA |
| Bólido Comidas preparado | ESPANHA |
| Bon App ' | FRANÇA |
| Marketse de dólar de fundo | CANADÁ |
| Cactus Comidas para Llevar | ARGENTINA |
| Centro Comercial Moctezuma | MÉXICO |
| Chinês chinês | SUÍÇA |
| Comércio mineiro | BRASIL |
Exibir número de série ($ índice)
O número de série da exibição da tabela pode ser adicionado $ índice em <td>:
Instância 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> <estilo> tabela, th, td, td {thp {throttle.min.js "> </script> <estilo>, th; colapso da fronteira: colapso; preenchimento: 5px;} tabela tr: nth-child (ímpar) {background-color: #f1f1f1;} tabela tr: nth-child (par) {background-color: #ffffff;} </style> </head> <body> <div ng-app = "myApp-controll (" "> </body> <body> <body> <ng-App =" myApp "ng-controll" = "Customerctrl>"> <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/clientes_json.php") .success (function (resposta) {$ scope.names = resposta.records;});}); </script> </body> </html>Efeito de corrida:
| 1 | Alfreds Futterkiste | Alemanha |
| 2 | Ana Trujillo Emparedados y Holdos | México |
| 3 | Antonio Moreno Taquería | México |
| 4 | Ao redor da buzina | Reino Unido |
| 5 | Bebidas de B. | Reino Unido |
| 6 | Berglunds Snabbköp | Suécia |
| 7 | Blauer Veja Delikatessen | Alemanha |
| 8 | Blondel Père et fils | França |
| 9 | Bólido Comidas preparado | Espanha |
| 10 | Bon App ' | França |
| 11 | Marketse de dólar de fundo | Canadá |
| 12 | Cactus Comidas para Llevar | Argentina |
| 13 | Centro Comercial Moctezuma | México |
| 14 | Chinês chinês | Suíça |
| 15 | Comércio mineiro | Brasil |
Use $ par e $ ímpar
Instância 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> <estilo> colapso da fronteira: colapso; preenchimento: 5px;} </style> </weef> <body> <div ng-app = "myApp" ng-controller = "CustomerCtrl"> <table> <tr ng-repeat = "x nomes"> <td ng-if = "$ ímpar" = "colorido de fundo:#f1f1f1"> {{{{ímãs ". ng-if="$even"> {{ x.Name }}</td> <td ng-if="$odd" style="background-color:#f1f1f1"> {{ x.Country }}</td> <td ng-if="$even"> {{ x.Country }}</td> </tr> </ table> </div> <cript> var app = angular.module ('myApp', []); App.Controller ('CustomerCtrl', function ($ scope, $ http) {$ http.get ("/try/angularjs/data/clusters_json.php"). Response.Records;});}); </script> </body> </html>Efeito de corrida:
| Alfreds Futterkiste | Alemanha |
| Ana Trujillo Emparedados y Holdos | México |
| Antonio Moreno Taquería | México |
| Ao redor da buzina | Reino Unido |
| Bebidas de B. | Reino Unido |
| Berglunds Snabbköp | Suécia |
| Blauer Veja Delikatessen | Alemanha |
| Blondel Père et fils | França |
| Bólido Comidas preparado | Espanha |
| Bon App ' | França |
| Marketse de dólar de fundo | Canadá |
| Cactus Comidas para Llevar | Argentina |
| Centro Comercial Moctezuma | México |
| Chinês chinês | Suíça |
| Comércio mineiro | Brasil |
O exposto acima é uma compilação de materiais do AngularJS, e continuaremos a adicioná -los mais tarde. Espero que possa ajudar os alunos necessitados.