Este artigo apresenta principalmente a caixa de diálogo "AngularJS+Bootstrap+NGDialog Modo de diálogo". Os alunos interessados nos tutoriais de JavaScript podem se referir a ele: Ao concluir um sistema de gerenciamento de segundo plano, você precisa usar uma tabela para exibir as informações do usuário registrado. Mas o endereço do usuário é muito longo e difícil de exibir. Portanto, se você deseja criar uma caixa de diálogo de modo, quando você clica no botão de endereço detalhado, uma caixa de diálogo aparece e exibe o endereço.
O efeito é o seguinte:
Ao verificar as informações, escolha usar o ngdialog, que é uma caixa de diálogo padrão e janela pop-up para aplicativos Angular.js. O ngdialog é muito pequeno (? 2k), tem uma API minimalista, altamente personalizável por meio de temas, com uma dependência única do angular.js.
Endereço do Github ngdialog: https://github.com/likestore/ngdialog
Ngdialog Demo: http://likestore.github.io/ngdialog/
Primeiro, apresente os arquivos JS e CSS necessários do NGDialog.
Pode ser introduzido através do 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-theme-defa 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/ngial.com/ajax/libs/ng-dialog/0.3.7/js/ngial.com/ajax/libs/ng-dialog/0.3.7/js/ngial.com/ajax/libs/ng-dialog/0.3.7/js/ngial.com/ajax/ng-dialog/0.3.7
Injetar dependências no controlador no usuário.js
<span style="font-size:18px;">var userControllers = angular.module('userControllers',['ngDialog']);userControllers.controller('userController',['$scope','$http','ngDialog',function($scope,$http, ngdialog) {$ scope.name = 'user'; $ scope.user = ""; $ scope.address = ""; // Obter informações do usuário $ http.get ('http: // localhost: 3000/users') .success (função) {$ scope.USer = Dados; 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 Detalhes do endereço});};}]) </span>test.html (leia o endereço no escopo e exiba -o, o estilo da tabela usa bootstrap)
<span style = "font-size: 18px;"> <table> <thead> <tr> <th> Nome do destinatário </th> <td> {{endereço.name}} </td> </tr> <tr> <th> RECENDENT </TD> <TD> {TRID.CONTENT} número </th> <td> {{endereço.phone}} </td> </tr> </tr> </tabela> </span>user.html (mostre informações do usuário. Quando o endereço não estiver vazio, exiba o botão de endereço detalhado. Ao clicar no botão, chame a função ClickToaddress no controlador)
<span style = "font-size: 18px;"> <div> <div> <div> gerenciamento de usuários </div> <div> <div> <input type = "text" placeholder = "pesquise ..." ng-model = 'search'> </than> <butt type = "" ir! ARIA-HIDDEN = "TRUE"> </span> </th> <th> Avatar </th> <th> Endereço padrão </th> <th> operação </th> </tbody> <ttr ng-repeat = "User in user | filtro: pesquise" > <td> {{user.username}} </td> <td> {{user.residualPayment}} </td> <td ng-if = "user.url! Avatar </td> <td ng-if = "user.address.length == 0"> nenhum endereço padrão </td> <td ng-if = "user.address.length! type = "Button" ng-click = "Remover (user._id)"> excluir </butut> </td> </tbody> </ table> </div> </span>O acima é o Bootstrap+AngularJS+NGDialog Modo de diálogo Modo de diálogo Introduzido pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!