AngularJS -Tabelle
Die NG-Repeat-Direktive kann Tische perfekt anzeigen.
Daten in der Tabelle anzeigen
Es ist sehr einfach, Angular zu verwenden, um Tabellen anzuzeigen:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" <table> <tr ng-repeat = "x in Namen"> <td> {{x.name}} </td> <td> {{{x.country}} </td> </tr> </table> </div> <script> var App = Angular.module ('MyApT', []; $ http) {$ http.get ("/try/angularjs/data/customer_json.php") .success (Funktion (Antwort) {$ scope.names = response.records;});}); </script> </body> </html>Auslaufergebnisse:
| Alfreds Futterkiste | Deutschland |
| Ana Trujillo sparedados y hidos | Mexiko |
| Antonio Moreno Taquería | Mexiko |
| Um das Horn | Vereinigtes Königreich |
| Bs Getränke | Vereinigtes Königreich |
| Berglunds Snabbköp | Schweden |
| Blauer Siehe Delikatessen | Deutschland |
| Blondel Père et Fils | Frankreich |
| Bólido comidas prepedas | Spanien |
| Bon App ' | Frankreich |
| Bottom-Dollar-Markt | Kanada |
| Kaktus comidas para llevar | Argentinien |
| Centro Comercial Moctezuma | Mexiko |
| Chop-Suy Chinese | Schweiz |
| Comércio mineiro | Brasilien |
Verwenden von CSS -Stilen
Um die Seite schöner zu machen, können wir CSS auf der Seite verwenden:
CSS -Stil
</style> </head> <body> <div ng-App = "MyApp" ng-controller = "customerCtrl"> <table> <tr ng-repeat = "x In Namen"> <td> {{{x.Name}}}} </td> </td> </table> </tdd> </tr> </table> </tla> </tla> </tla> </tla> </tla> </tla> </tla> </tla> </tla> </tla> </tla> </tla> </tla> </tla> </trid> </trid> </trid> </trid> </trid> </trid> </tla> </tble Angular.module ('MyApp', []); App.Controller ('customerCtrl', function ($ scope, $ http) {$ http.get ("http://www.runoob.com/try/angularjs/data/customers_json.phps.succes (setze) {$.SCON.PHP"). Antwort.Records;});}); </script> </body> </html>Auslaufergebnisse:
| Alfreds Futterkiste | Deutschland |
| Ana Trujillo sparedados y hidos | Mexiko |
| Antonio Moreno Taquería | Mexiko |
| Um das Horn | Vereinigtes Königreich |
| Bs Getränke | Vereinigtes Königreich |
| Berglunds Snabbköp | Schweden |
| Blauer Siehe Delikatessen | Deutschland |
| Blondel Père et Fils | Frankreich |
| Bólido comidas prepedas | Spanien |
| Bon App ' | Frankreich |
| Bottom-Dollar-Markt | Kanada |
| Kaktus comidas para llevar | Argentinien |
| Centro Comercial Moctezuma | Mexiko |
| Chop-Suy Chinese | Schweiz |
| Comércio mineiro | Brasilien |
Verwenden Sie den OrderBy -Filter
Sortieren Sie die Anzeige, Sie können den OrderBy -Filter verwenden:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min Grenzkollapse: Zusammenbruch; Padding: 5px;} Tabelle Tr: n-te-child (ungerade) {Hintergrundfarbe: #f1f1f1;} Tabelle Tr: N-Child (sogar) {Hintergrundfarbe: #FFFFFF;} </style> </head> <body> <div ng-app = "myapp" ng-controller = "customed |" customer 'Country' "> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> </div> <cript> var app = angular.module ('MyApp', []); App.Cortroller ($Ctrl) ($ scope, $ htttp) ($ $ctrl ' $ http.get ("/try/Angularjs/data/customer_json.php") .success (Funktion (Antwort) {$ scope.names = response.records;});}); </script> </body> </html>Laufeffekt:
| Kaktus comidas para llevar | Argentinien |
| Comércio mineiro | Brasilien |
| Bottom-Dollar-Markt | Kanada |
| Blondel Père et Fils | Frankreich |
| Bon App ' | Frankreich |
| Alfreds Futterkiste | Deutschland |
| Blauer Siehe Delikatessen | Deutschland |
| Ana Trujillo sparedados y hidos | Mexiko |
| Antonio Moreno Taquería | Mexiko |
| Centro Comercial Moctezuma | Mexiko |
| Bólido comidas prepedas | Spanien |
| Berglunds Snabbköp | Schweden |
| Chop-Suy Chinese | Schweiz |
| Um das Horn | Vereinigtes Königreich |
| Bs Getränke | Vereinigtes Königreich |
Verwenden Sie Großbuchstaben
Verwenden Sie den Großbuchstaben, um in Großbuchstaben zu konvertieren:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min Grenzkollapse: Zusammenbruch; Padding: 5px;} Tabelle Tr: N-te-Kind (ungerade) {Hintergrundfarbe: #f1f1f1;} Tabelle Tr: N-Child (sogar) {Hintergrundfarbe: #FFFFFF; <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/Customers_JSON.php") .success(function (response) {$ scope.names = response.records;});}); </script> </body> </html>Laufeffekt:
| Alfreds Futterkiste | DEUTSCHLAND |
| Ana Trujillo sparedados y hidos | MEXIKO |
| Antonio Moreno Taquería | MEXIKO |
| Um das Horn | Vereinigtes Königreich |
| Bs Getränke | Vereinigtes Königreich |
| Berglunds Snabbköp | SCHWEDEN |
| Blauer Siehe Delikatessen | DEUTSCHLAND |
| Blondel Père et Fils | FRANKREICH |
| Bólido comidas prepedas | SPANIEN |
| Bon App ' | FRANKREICH |
| Bottom-Dollar-Markt | KANADA |
| Kaktus comidas para llevar | ARGENTINIEN |
| Centro Comercial Moctezuma | MEXIKO |
| Chop-Suy Chinese | SCHWEIZ |
| Comércio mineiro | BRASILIEN |
Seriennummer anzeigen ($ Index)
Die Seriennummer der Tabelle kann $ index in <td> hinzugefügt werden:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min Grenzkollapse: Zusammenbruch; Padding: 5px;} Tabelle Tr: N-te-Kind (ungerade) {Hintergrundfarbe: #f1f1f1;} Tabelle Tr: N-Child (sogar) {Hintergrundfarbe: #FFFFFF; <td> {{$ index + 1}} </td> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> </divusctroller (| myApp ', []; $ http) {$ http.get ("/try/angularjs/data/customer_json.php") .success (Funktion (Antwort) {$ scope.names = response.records;});}); </script> </body> </html>Laufeffekt:
| 1 | Alfreds Futterkiste | Deutschland |
| 2 | Ana Trujillo sparedados y hidos | Mexiko |
| 3 | Antonio Moreno Taquería | Mexiko |
| 4 | Um das Horn | Vereinigtes Königreich |
| 5 | Bs Getränke | Vereinigtes Königreich |
| 6 | Berglunds Snabbköp | Schweden |
| 7 | Blauer Siehe Delikatessen | Deutschland |
| 8 | Blondel Père et Fils | Frankreich |
| 9 | Bólido comidas prepedas | Spanien |
| 10 | Bon App ' | Frankreich |
| 11 | Bottom-Dollar-Markt | Kanada |
| 12 | Kaktus comidas para llevar | Argentinien |
| 13 | Centro Comercial Moctezuma | Mexiko |
| 14 | Chop-Suy Chinese | Schweiz |
| 15 | Comércio mineiro | Brasilien |
Verwenden Sie $ gleich und $ Odd
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" Grenzkollapse: Zusammenbruch; padding: 5px;}</style></head><body><div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td ng-if="$odd" style="background-color:#f1f1f1"> {{ x.Name }}</td> <td ng-if = "$ sogar"> {{x.name}} </td> <td ng-if = "$ Odd" style = "background-color:#f1f1f1"> {{x.country}}}}}}}}}}}}} </tr> </table> </div> <script> var app = angular.module ('myapp', []); app.controller ('customerCtrl', function ($ scope, $ http) {$ http.get ("/try/Angularjs/customer_json.php". Antwort.Records;});}); </script> </body> </html>Laufeffekt:
| Alfreds Futterkiste | Deutschland |
| Ana Trujillo sparedados y hidos | Mexiko |
| Antonio Moreno Taquería | Mexiko |
| Um das Horn | Vereinigtes Königreich |
| Bs Getränke | Vereinigtes Königreich |
| Berglunds Snabbköp | Schweden |
| Blauer Siehe Delikatessen | Deutschland |
| Blondel Père et Fils | Frankreich |
| Bólido comidas prepedas | Spanien |
| Bon App ' | Frankreich |
| Bottom-Dollar-Markt | Kanada |
| Kaktus comidas para llevar | Argentinien |
| Centro Comercial Moctezuma | Mexiko |
| Chop-Suy Chinese | Schweiz |
| Comércio mineiro | Brasilien |
Das obige ist eine Zusammenstellung von AngularJs -Formmaterialien, und wir werden sie später weiter hinzufügen. Ich hoffe, es kann Schülern in Not helfen.