In diesem Artikel wird hauptsächlich das Dialogfeld "AngularJS+Bootstrap+NgDialog Implementierungsmodus" vorgestellt. Studierende, die sich für JavaScript -Tutorials interessieren, können sich darauf verweisen: Wenn Sie ein Hintergrundverwaltungssystem ausfüllen, müssen Sie eine Tabelle verwenden, um die Informationen des registrierten Benutzers anzuzeigen. Die Benutzeradresse ist jedoch zu lang und schwer anzeigen. Wenn Sie also ein Modusdialogfeld erstellen möchten, werden beim Klicken auf die detaillierte Adressschaltfläche ein Dialogfeld angezeigt und die Adresse angezeigt.
Der Effekt ist wie folgt:
Durch Überprüfen der Informationen verwenden Sie Ngdialog, ein Muster-Dialogfeld und ein Popup-Fenster für Angular.js-Anwendungen. Ngdialog ist sehr klein (2K), hat eine minimalistische API, die durch Themen sehr anpassbar ist und eine einzigartige Abhängigkeit von Angular.js hat.
Ngdialog Github Adresse: https://github.com/likestore/ngdialog
ngdialog Demo: http://likestore.github.io/ngdialog/
Stellen Sie zunächst die erforderlichen JS- und CSS -Dateien von ngdialog ein.
Kann über CDN eingeführt werden
<span style = "font-size: 18px;"> // cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngdialog.min.css ult.min.css // cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngdialog-tem-plain.min.css
Injizieren Sie Abhängigkeiten in Controller in user.js
<span style = "font-size: 18px;"> var usercontrollers = angular.module ('userControllers', ['ngdialog']); UserControllers.Controller ('UserController', ['$ Scope', $ http ', ngdialog', Funktion ($ scope, $ http ', ngdialog' ($ $ $ http ', $ $ http', ngdialog ', $ $ $ http', ngdialog ', $ $ $ http', ngdialog ', $ $ $ http', ngdialog '($ $ $ http', $ $ http ', ngdialog', $ $ $ http ', ngdialog' ($ $ $ http '($ $ http' Ngdialog) {$ scope.name = 'user'; Adresstaste, das Modus-Dialogfeld $ scope.clickToaddress = Funktion (Adresse) {$ scope.address = address; Adressdetails});};}]) </span>test.html (Lesen Sie die Adresse im Bereich und zeigen Sie sie an, der Tabellenstil verwendet Bootstrap)
<span style = "font-size: 18px;"> <table> <thead> <tr> <Th> Empfängername </th> <td> {{adresse. Nummer </th> <td> {{adresse.phone}} </td> </tr> </tr> </table> </span>user.html (Benutzerinformationen anzeigen. Wenn die Adresse nicht leer ist, zeigen Sie die detaillierte Adressschaltfläche an. Wenn Sie auf die Schaltfläche klicken, rufen Sie die Funktion ClickToaddress im Controller auf.
<span style = "Schriftgröße: 18px;"> <div> <div> <Viv> Benutzerverwaltung </div> <div> <Eingabe type = "text" placeholder = "Suche nach ..." ng-model = 'such'> <span> <button type = "button"> go! aria-hidden = "true"> </span> </th> <th> avatar </th> <th> Standardadresse </th> <th> Betrieb </th> </tbody> <ttr ng-repeat = "Benutzer in Benutzer | Filter: Suche" > <td> {{user.username}} </td> <td> {{user.residualPayment}} </td> <td ng-if = "user.url! avatar </td> <td ng-if = "user.address.length == 0"> Keine Standardadresse </td> <td ng-if = "user.address.Length! type = "button" ng-klick = "remove (user._id)"> löschen </button> </td> </tbody> </table> </div> </span>Das obige ist das vom Editor vorgestellte Dialogfeld „AngularJS+NgDialog Implementierungsmodus“ ist das Dialogfeld „AngularJS+Ngdialog Implementierungsmodus“. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!