Este artículo presenta principalmente el "AngularJS+Bootstrap+NGDialog Modo de diálogo de diálogo". Los estudiantes interesados en los tutoriales de JavaScript pueden referirse a él: al completar un sistema de administración de fondo, debe usar una tabla para mostrar la información del usuario registrado. Pero la dirección del usuario es demasiado larga y difícil de mostrar. Entonces, si desea crear un cuadro de diálogo de modo, cuando hace clic en el botón Dirección detallado, aparece un cuadro de diálogo y muestra la dirección.
El efecto es el siguiente:
Al verificar la información, elija usar NGDialog, que es un cuadro de diálogo de patrón y una ventana emergente para aplicaciones Angular.js. Ngdialog es muy pequeño (? 2k), tiene una API minimalista, altamente personalizable a través de temas, con una dependencia única de Angular.js.
Dirección de Ngdialog Github: https://github.com/likestore/ngdialog
ngdialog demo: http://likestore.github.io/ngdialog/
Primero, presente los archivos JS y CSS requeridos de NGDialog.
Se puede introducir a través de CDN
<span style = "font-size: 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-thefa ult.min.css // cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/css/ngdialog-theme-plain.min.css // cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.3.7/js/ngdialog.min.js <span>
Inyectar dependencias en el controlador en user.js
<span style = "font-size: 18px;"> var userControllers = angular.module ('UserControllers', ['ngdialog']); userControllers.controller ('UserController', ['$ Scope', '$ http', 'ngdialog', función ($ scope, $ http,, $ http, ngdialog) {$ scope.name = 'user'; $ scope.user = ""; $ scope.address = ""; // obtener información de usuario $ http.get ('http: // localhost: 3000/users') .success (función (datos) {$ scope.user = data; console.log ($ scope.user);}; Botón Dirección, el cuadro de diálogo de modo $ scope.clicktoaddress = function (dirección) {$ scope.address = dirección; ngdialog.open ({platplate: 'vistas/test.html', // El contenido del cuadro de diálogo de modo es test.htmlClassNameName: 'ngdialog-them. los detalles de la dirección});};}]) </span>test.html (lea la dirección en el alcance y muestrela, el estilo de la tabla usa bootstrap)
<span style = "font-size: 18px;"> <table> <thead> <tr> <th> name de destinatario </th> <td> {{dirección. Número </th> <td> {{dirección.phone}} </td> </tr> </tr> </table> </span>user.html (Mostrar información del usuario. Cuando la dirección no esté vacía, muestre el botón de dirección detallado. Al hacer clic en el botón, llame a la función ClickToaddress en el controlador)
<span style = "font-size: 18px;"> <div> <div> <div> gestión de usuarios </div> <div> <div> <put type = "text" standholder = "buscar ..." ng-model = 'buscar'> <span> <botte type = "button"> go! </botte> aria-hidden = "true"> </span> </th> <th> avatar </th> <th> dirección predeterminada </th> <th> operación </th> </tbody> <ttr ng-repeat = "usuario en el usuario | filtro: búsqueda" > <td> {{user.Username}} </td> <td> {{user.residualpayment}}} </td> <td ng-if = "user.url! = 'Undefined'"> {{user.Url}}}} </td> <td ng-if = "user.url == 'Únesse odofined'" "System-" System-"System-" System-"System-" System-"System-" System-"System-System-" Avatar </td> <td ng-if = "user.address.length == 0"> sin dirección predeterminada </td> <td ng-if = "user.address.length! = 0" ng-depreat = "dirección en user.address" ng-click = "hacer- type = "Button" ng-click = "remove (user._id)"> Eliminar </boton> </td> </tbody> </table> </div> </span>Lo anterior es el cuadro de diálogo Bootstrap+AngularJS+NGDialog Modo de implementación introducido por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!