This article mainly introduces the "angularjs+bootstrap+ngDialog implementation mode dialog box". Students who are interested in Javascript tutorials can refer to it: When completing a background management system, you need to use a table to display the information of the registered user. But the user address is too long and difficult to display. So if you want to create a mode dialog box, when you click the detailed address button, a dialog box pops up and displays the address.
The effect is as follows:
By checking the information, choose to use ngDialog, which is a pattern dialog box and pop-up window for Angular.js applications. ngDialog is very small (?2K), has a minimalist API, highly customizable through themes, with a unique dependency on Angular.js.
ngDialog github address: https://github.com/likestore/ngDialog
ngDialog Demo: http://likestore.github.io/ngDialog/
First, introduce the required js and css files of ngdialog.
Can be introduced through 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/ngDialog.min.js</span>
Inject dependencies in controller in user.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 = "";//Get user information$http.get('http://localhost:3000/users').success(function(data) {$scope.user = data;console.log($scope.user);});//When clicking the detailed 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 details});};}])</span>test.html (read the address in scope and display it, the table style uses bootstrap)
<span style="font-size:18px;"><table><thead><tr><th>Recipient name</th><td>{{address.name}}</td></tr><tr><th>Recipient address</th><td>{{address.content}}</td></tr><tr><th>Mobile phone number</th><td>{{address.phone}}</td></tr></tr></table></span>user.html (Show user information. When the address is not empty, display the detailed address button. When clicking the button, call the clickToAddress function in the controller)
<span style="font-size:18px;"><div><div><div>User Management</div><div><div><input type="text" placeholder="Search for..." ng-model='search'><span><button type="button">Go!</button></span></div></div><table><tead><th>Name</th><th>Balance<span aria-hidden="true"> </span></th><th>Avatar</th><th>Default address</th><th>Operation</th></tbody><ttr ng-repeat="user in user | filter : search" ><td>{{user.userName}}</td><td>{{user.residualPayment}}</td><td ng-if="user.url != 'undefined' ">{{user.url}}</td><td ng-if="user.url == 'undefined' ">System default avatar</td><td ng-if="user.address.length == 0 ">No default address</td><td ng-if="user.address.length != 0"ng-repeat="address in user.address " ng-click="clickToAddress(address)"><button type="button">Detailed address</button></td><td><button type="button" ng-click="remove(user._id)">Delete</button></td></tbody></table></div></span>The above is the BootStrap+Angularjs+NgDialog implementation mode dialog box introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!