Lassen Sie mich zunächst kurz die grundlegenden Konzepte von Angular.js und Bootstrap vorstellen.
AngularJS ist ein JavaScript -Framework. Es kann über das <Script> -Tag zu HTML -Seiten hinzugefügt werden.
AngularJs erweitert HTML durch Anweisungen und bindet Daten durch Ausdrücke an HTML.
Bootstrap von Twitter ist derzeit das beliebteste Front-End-Frontwork. Bootstrap basiert auf HTML, CSS und JavaScript. Es ist einfach und flexibel und macht die Webentwicklung schneller.
Ich habe kürzlich Angular.js gelernt und während des Lernprozesses viele Demos geübt. Hier werde ich zuerst das Formular + Pagination veröffentlichen.
Schauen wir uns das Endergebnis an:
Ich muss sagen, dass der Code -Stil von Angular.js sehr beliebt ist und Dutzende von Codezeilen klar und präzise die oben genannten Funktionen implementieren.
Zunächst stammt die Datenquelle der Tabelle von server.js, um herunterzuladen. Holen Sie sich die Nummer und zeigen Sie sie dann auf Seite an.
1. Die Tabelle wird über die NG-Wiederholung angezeigt, und der Code lautet wie folgt:
<table><tr><th>index</th><th ng-repeat="(x,y) in items[0]">{{ x }}</th></tr><tr ng-repeat="x in items"><td>{{ $index + 1 }}</td><td ng-bind="x.Name"></td><td ng-bind = "x.city"> </td> <td ng-bind = "x.country"> </td> </tr> </table>$ index ist der Standardparameter der Wiederholung. Der Spalten -Header der Tabelle ist der Schlüsselwert, der in der ersten Zeile der Datenquelle (JSON) gelangt ist. Wenn Bootstrap natürlich angeben muss, dass die Klasse der Tabelle Tabelle ist.
2. Pagination verwendet auch NG-Wiederholungen. Ich muss sagen, dass NG-Repeat eine häufige Anweisung ist.
Der Paging -Code lautet wie folgt:
<nav><ul><li><a ng-click="Previous()"><span>Previous page</span></a></li><li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" ><a ng-click="selectPage(page)" >{{ page }}</a></li><li><a ng-klick = "next ()"> <span> nächste Seite </span> </a> </li> </ul> </nav>Hier verwenden wir den NG-Klick-Ereignisanweis. Auch verwendete Befehl ng-Klasse
ng-class = "{active: isActivePage (Seite)}"Der obige Code ist der für Pagination ausgewählte Stil.
Diese Tabelle fügt das Paging zur Seite hinzu, ist ein gefälschtes Paging, das einmal Daten aus dem Backend entnimmt und die gefilterten Daten von JSON durch verschiedene Paging anzeigt.
Spezifischer Code + Kommentare:
<! DocType html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> </title> </title> </head> </utf-8 "/> </title> </title> </addes> </utf-8"- CSS-Datei-> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min 50px;}. Pagination {rechts: 0px; Position: absolut; top: -30px;} nav li {cursor: pointer;} </style> <div id = "divmain" ng-App = "MyApp" ng-controller = "myctrl" items [0] "> {{x}} </th> </tr> <tr ng-repeat =" x In Elementen "> <td> {{$ index + 1}} </td> <td ng-bind =" x.name " ng-bind = "x.country"> </td> </tr> </table> <nav> <ul> <li> <a ng-klick = "vorher ()"> <span> Vorherige Seite </span> </a> </li> <li ng-repeat = "Seite in pagelist" ng-class = "{active: isactactactivePage)"}) "{{{{Active": isactive: isactive: isactivePage (page)} " > {{page}} </a> </li> <li> <a ng-klick = "next ()"> <span> nächste Seite </span> </a> </li> </ul> </nav> </div> <skript src = "http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"> </script> <script> var app = angular.module ("myapp", []); {$ http.get ("service.js"). Dann (Funktion (Antwort) {// Datenquelle $ scope.data = Antwort $ scope.pages> 5? $ scope.pageSize)); // filtern Sie die aktuellen angezeigten Daten in der Tabelle nach der aktuellen Anzahl der Seiten} $ scope.items = $ scope.data.lice (0, $ scope.pageSize); // Das Array, an die die Pagination wiederholt werden soll (var i = 0; 1);} // Drucken Sie den aktuell ausgewählten Seitenindex $ scope.selectPage = function (Seite) {// mindestens 1 als das maximale if (Seite <1 || Seite> $ scope.pages) return; // Die maximale Anzahl von Seiten wird angezeigt. 3); Seite);}; // Setzen Sie den aktuell ausgewählten Seitenstil $ scope.isactivePage = function (Seite) {return $ scope.selpage == Seite;}; // Vorherige Seite $ scope.previous = function () {$ scope.selpage ($ scope.selpage - 1);} // Next $ scope.next = function ($ scope. 1);};});}) </script> </body> </html>Der Editor wird Ihnen so viel über die Kombination von angular.js und Bootstrap vorstellen, um den Tischpaging -Code zu implementieren, und ich hoffe, er wird Ihnen hilfreich sein!