Table angulaire
La directive NG-Repeat peut afficher parfaitement les tables.
Afficher les données dans le tableau
Il est très facile d'utiliser Angular pour afficher les tables:
Instance angularjs
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </ head> <corps <Bile> <tr ng-repeat = "x in noms"> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </sable> </div> <cript> var app = angular.module ('myapp', []); app.controller ('' '', la fonction ($ SCOPE, []); $ http) {$ http.get ("/ try / angularjs / data / client_json.php") .success (function (réponse) {$ scope.names = réponse.records;});}); </ script> </ body> </html>Résultats en cours:
| Alfreds Futterkiste | Allemagne |
| Ana Trujillo Emparedados y hallos | Mexique |
| Antonio Moreno Taquería | Mexique |
| Autour de la corne | ROYAUME-UNI |
| Bénéresses de B | ROYAUME-UNI |
| Bergluds snabbköp | Suède |
| Blauer voir Delikatessen | Allemagne |
| Fils Blondel Père et | France |
| Bólido Comidas préparé | Espagne |
| Bon application ' | France |
| Marketse de moins du dollar | Canada |
| Cactus comidas para llevar | Argentine |
| Centro Comercial Moctezuma | Mexique |
| Chouch-usey chinois | Suisse |
| Comércio mineiro | Brésil |
Utilisation des styles CSS
Pour rendre la page plus belle, nous pouvons utiliser CSS dans la page:
Style CSS
</ style> </ head> <body> <div ng-app = "myApp" ng-controller = "Customerctrl"> <s table> <tr ng-repeat = "x in noms"> <td> {{x.name}} </td> <td> {{{x.comitry}} </td> </r> angular.module ('myApp', []); app.Controller ('ClientsCtrl', fonction ($ scope, $ http) {$ http.get ("http://www.runoob.com/try/angularjs/data/customerS_json.php"). réponse.records;});}); </script> </body> </html>Résultats en cours:
| Alfreds Futterkiste | Allemagne |
| Ana Trujillo Emparedados y hallos | Mexique |
| Antonio Moreno Taquería | Mexique |
| Autour de la corne | ROYAUME-UNI |
| Bénéresses de B | ROYAUME-UNI |
| Bergluds snabbköp | Suède |
| Blauer voir Delikatessen | Allemagne |
| Fils Blondel Père et | France |
| Bólido Comidas préparé | Espagne |
| Bon application ' | France |
| Marketse de moins du dollar | Canada |
| Cactus comidas para llevar | Argentine |
| Centro Comercial Moctezuma | Mexique |
| Chouch-usey chinois | Suisse |
| Comércio mineiro | Brésil |
Utiliser l'ordre du filtre
Trier l'affichage, vous pouvez utiliser le filtre OrderBy:
Instance angularjs
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> <style> Table Border-Collapse: s'effondrer; PADDING: 5PX;} TABLE TR: NTH-Child (Odd) {Background-Color: # F1F1F1;} TABLE TR: Nth-Child (même) {Background-Color: #FFFFFF;} </ Style> </ Head> <Orank> <div ng-app = "MyApp" Ng-Controller = "CircondyTrl"> <Tall 'Country' "> <td> {{x.name}} </td> <td> {{X.Country}} </td> </tr> </s table> </div> <cript> var app = angular.module ('myApp', []); app.controller ('customerCtrl', fonction ($ scope, $ http) { $ http.get ("/ try / angularjs / data / client_json.php") .success (function (réponse) {$ scope.names = réponse.records;});}); </cript> </ body> </html>Effet de course:
| Cactus comidas para llevar | Argentine |
| Comércio mineiro | Brésil |
| Marketse de moins du dollar | Canada |
| Fils Blondel Père et | France |
| Bon application ' | France |
| Alfreds Futterkiste | Allemagne |
| Blauer voir Delikatessen | Allemagne |
| Ana Trujillo Emparedados y hallos | Mexique |
| Antonio Moreno Taquería | Mexique |
| Centro Comercial Moctezuma | Mexique |
| Bólido Comidas préparé | Espagne |
| Bergluds snabbköp | Suède |
| Chouch-usey chinois | Suisse |
| Autour de la corne | ROYAUME-UNI |
| Bénéresses de B | ROYAUME-UNI |
Utiliser le filtre en majuscules
Utilisez le filtre en majuscule pour se convertir en majuscules:
Instance angularjs
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> <style> Table Border-Collapse: s'effondrer; PADDING: 5PX;} TABLE TR: Nth-Child (Odd) {Background-Color: # F1F1F1;} TABLE TR: Nth-Child (même) {background-Color: #FFFFFF;} </ Style> </Ead> <Orank> <div ng-app = "MyApp" Ng-Controller = " <Td> {{x.name}} </td> <td> {{x.country | Uppercase}} </td> </tr> </ table> </div> <cript> var app = angular.module ('myApp', []); app.Controller ('CustomeryCtrl', fonction ($ Scope, $ http) {$ http.get ("/ try / angularjs / data / client_json.php"). {$ scope.names = réponse.records;});}); </cript> </body> </html>Effet de course:
| Alfreds Futterkiste | ALLEMAGNE |
| Ana Trujillo Emparedados y hallos | MEXIQUE |
| Antonio Moreno Taquería | MEXIQUE |
| Autour de la corne | ROYAUME-UNI |
| Bénéresses de B | ROYAUME-UNI |
| Bergluds snabbköp | SUÈDE |
| Blauer voir Delikatessen | ALLEMAGNE |
| Fils Blondel Père et | FRANCE |
| Bólido Comidas préparé | ESPAGNE |
| Bon application ' | FRANCE |
| Marketse de moins du dollar | CANADA |
| Cactus comidas para llevar | ARGENTINE |
| Centro Comercial Moctezuma | MEXIQUE |
| Chouch-usey chinois | SUISSE |
| Comércio mineiro | BRÉSIL |
Afficher le numéro de série ($ index)
Le numéro de série d'affichage de la table peut être ajouté $ index dans <TD>:
Instance angularjs
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> <style> Table Border-Collapse: s'effondrer; PADDING: 5PX;} TABLE TR: Nth-Child (Odd) {Background-Color: # F1F1F1;} TABLE TR: Nth-Child (même) {background-Color: #FFFFFF;} </ Style> </Ead> <Orank> <div ng-app = "MyApp" Ng-Controller = " <td> {{$ index + 1}} </td> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </sple> </div> <crit> var app = angular.module ('myapp', []); app.ConCon $ http) {$ http.get ("/ try / angularjs / data / client_json.php") .success (function (réponse) {$ scope.names = réponse.records;});}); </ script> </ body> </html>Effet de course:
| 1 | Alfreds Futterkiste | Allemagne |
| 2 | Ana Trujillo Emparedados y hallos | Mexique |
| 3 | Antonio Moreno Taquería | Mexique |
| 4 | Autour de la corne | ROYAUME-UNI |
| 5 | Bénéresses de B | ROYAUME-UNI |
| 6 | Bergluds snabbköp | Suède |
| 7 | Blauer voir Delikatessen | Allemagne |
| 8 | Fils Blondel Père et | France |
| 9 | Bólido Comidas préparé | Espagne |
| 10 | Bon application ' | France |
| 11 | Marketse de moins du dollar | Canada |
| 12 | Cactus comidas para llevar | Argentine |
| 13 | Centro Comercial Moctezuma | Mexique |
| 14 | Chouch-usey chinois | Suisse |
| 15 | Comércio mineiro | Brésil |
Utilisez $ pair et $ étrange
Instance angularjs
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> <style> TABLE, TD {border: 1px Solid Gray; Border-Collapse: s'effondrer; Padding: 5px;} </ style> </ head> <body> <div ng-app = "MyApp" ng-Controller = "Customerctrl"> <s table> <tr ng-repeat = "x dans les noms"> <td ng-if = "$ od" Style = "background-Color: # f1f1"> {{{x.name}} ng-if = "$ même"> {{x.name}} </td> <td ng-if = "$ od" style = "background-Color: # f1f1f1"> {{x.country}} </ td> <td ng-if = "$ même"> {{x.Country}} </ td> </tr> </ table> </div> <cript> var app = angular.module ('myapp', []); app.Controller ('ClientsCtrl', fonction ($ scope, $ http) {$ http.get ("/ try / angularjs / data / client_json.php"). réponse.records;});}); </script> </body> </html>Effet de course:
| Alfreds Futterkiste | Allemagne |
| Ana Trujillo Emparedados y hallos | Mexique |
| Antonio Moreno Taquería | Mexique |
| Autour de la corne | ROYAUME-UNI |
| Bénéresses de B | ROYAUME-UNI |
| Bergluds snabbköp | Suède |
| Blauer voir Delikatessen | Allemagne |
| Fils Blondel Père et | France |
| Bólido Comidas préparé | Espagne |
| Bon application ' | France |
| Marketse de moins du dollar | Canada |
| Cactus comidas para llevar | Argentine |
| Centro Comercial Moctezuma | Mexique |
| Chouch-usey chinois | Suisse |
| Comércio mineiro | Brésil |
Ce qui précède est une compilation des matériaux de forme angularjs, et nous continuerons de les ajouter plus tard. J'espère que cela peut aider les étudiants dans le besoin.