Cet article présente principalement la boîte de dialogue Mode d'implémentation AngularJS + Bootstrap + Ngdialog ". Les étudiants qui sont intéressés par les tutoriels JavaScript peuvent y faire référence: lorsque vous terminez un système de gestion d'arrière-plan, vous devez utiliser un tableau pour afficher les informations de l'utilisateur enregistré. Mais l'adresse utilisateur est trop longue et difficile à afficher. Donc, si vous souhaitez créer une boîte de dialogue de mode, lorsque vous cliquez sur le bouton Adresse détaillée, une boîte de dialogue apparaît et affiche l'adresse.
L'effet est le suivant:
En vérifiant les informations, choisissez d'utiliser NGDialog, qui est une boîte de dialogue de motifs et une fenêtre contextuelle pour les applications angular.js. NgDialog est très petit (? 2k), a une API minimaliste, hautement personnalisable à travers des thèmes, avec une dépendance unique sur Angular.js.
ngdialog github Adresse: https://github.com/likestore/ngdialogic
Demo ngdialog: http://likestore.github.io/ngdialog/
Tout d'abord, introduisez les fichiers JS et CSS requis de NGDialog.
Peut être introduit via CDN
<span style = "font-saze: 18px;"> // cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngdialog.min.css//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngDialog-Tefa ult.min.css // cdnjs.cloudflare.com / ajax / libs / ng-dialog / 0.3.7 / css / ngdialog-theme-plain.min.css // Cdnjs
Injecter les dépendances dans le contrôleur dans user.js
<span style = "font-size: 18px;"> var userControllers = angular.module ('userControllers', ['ngDialog']); userControllers.Controller ('userController', ['$ scope', '$ http " ngDialog) {$ scope.name = 'user'; $ scope.user = ""; $ scope.address = ""; // obtenir des informations utilisateur $ http.get ('http: // localhost: 3000 / users') .sucCesss (function (data) {$ scope.user = data; console.log ($ scope.user); address button, the mode dialog box $scope.clickToAddress = function (address) {$scope.address = address;ngDialog.open({ template: 'views/test.html',//The content of the mode dialog box is test.htmlclassName: 'ngdialog-theme-plain',scope:$scope //Pass scope to test.html to display the address Détails});};}]) </span>test.html (lisez l'adresse dans la portée et l'affichage, le style de table utilise Bootstrap)
<span style = "Font-Size: 18PX;"> <Table> <Thead> <Tr> <Th> Nom du destinataire </th> <Td> {{Adress.Name}} </td> </tr> <tr> <th> Adresse du destinataire </ TH> <TD> {{Adresse.Content}} </td> </ tr> <tr> Numéro </th> <TD> {{Adress.Phone}} </td> </tr> </tr> </ table> </span>user.html (afficher les informations de l'utilisateur. Lorsque l'adresse n'est pas vide, affichez le bouton d'adresse détaillé.
<span style = "Font-Size: 18px;"> <div> <div> <div> Management des utilisateurs </div> <div> <div> <entrée type = "Text" Planholder = "Recherche pour ..." ng-model = 'search'> <span> <Button Type = "Button"> Go! </ Button> </pan> </ div> </ Div> </ Tableau> <Tead> aria-hidden = "true"> </span> </th> <th> avatar </th> <th> adresse par défaut </th> <th> opération </th> </tbody> <ttr ng-repeat = "utilisateur dans l'utilisateur | filtre: recherche" > <td> {{user.username}} </td> <td> {{user.residudualpayment}} </td> <td ng-if = "user.url! = 'Undefined'"> {{user.url}} </td> <td ng-if = "user.url == '' undefined '" Avatar </td> <td ng-if = "user.address.length == 0"> pas d'adresse par défaut </td> <td ng-if = "user.address.length! = 0" ng-repeat = "Adresse dans user.address" ng-Click = "clicktoaddress (adresse)"> <bouton de type = "Button"> Button détaillé> Adresse détaillée </ Td> <Td> <boutony type = "Button" ng-Click = "retire (user._id)"> delete </futton> </td> </tbody> </ table> </div> </span>Ce qui précède est la boîte de dialogue Bootstrap + AngularJS + NGDialog Implémentation vous présentée par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!