本篇文章主要介紹了"angularjs+bootstrap+ngDialog實現模式對話框"，對於Javascript教程感興趣的同學可以參考一下： 在完成一個後台管理系統時，需要用表顯示註冊用戶的信息。但是用戶地址太長了，不好顯示。所以想做一個模式對話框，點擊詳細地址按鈕時，彈出對話框，顯示地址。
效果如下圖：
通過查閱資料，選擇使用ngDialog來實現，ngDialog是一個用於Angular.js應用的模式對話框和彈出窗口。 ngDialog非常小（?2K），擁有簡約的API，通過主題高度可定制的，具有唯一的依賴Angular.js。
ngDialog github地址: https://github.com/likeastore/ngDialog
ngDialog Demo : http://likeastore.github.io/ngDialog/
首先引入需要的ngdialog的js和css文件。
可通過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-default.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>
在user.js裡的controller中註入依賴
<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 = "";//獲取用戶信息$http.get('http://localhost:3000/users').success(function(data) {$scope.user = data;console.log($scope.user);});//點擊詳細地址按鈕時，跳出模式對話框$scope.clickToAddress = function (address) {$scope.address = address;ngDialog.open({ template: 'views/test.html',//模式對話框內容為test.htmlclassName: 'ngdialog-theme-plain',scope:$scope //將scope傳給test.html,以便顯示地址詳細信息});};}])</span>test.html(讀取scope中的address並顯示，表格樣式採用bootstrap )
<span style="font-size:18px;"><table><thead><tr><th>收件人姓名</th><td>{{address.name}}</td></tr><tr><th>收件地址</th><td>{{address.content}}</td></tr><tr><th>手機號</th><td>{{address.phone}}</td></tr></thead></table></span>user.html (顯示用戶的信息，當地址不為空時，顯示詳細地址按鈕，並點擊按鈕時，調用controller中的clickToAddress函數)
<span style="font-size:18px;"><div><div><div>用戶管理</div><div><div></div><div><div><input type="text" placeholder="Search for..." ng-model='search'><span><button type="button">Go!</button></span></div></div></div><table><thead><th>姓名</th><th>餘額<span aria-hidden="true"> </span></th><th>頭像</th><th>默認地址</th><th>操作</th></thead><tbody><tr 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' ">系統默認頭像</td><td ng-if="user.address.length == 0 ">暫無默認地址</td><td ng-if="user.address.length != 0"ng-repeat="address in user.address " ng-click="clickToAddress(address)"><button type="button">詳細地址</button></td><td><button type="button" ng-click="remove(user._id)">刪除</button></td></tr></tbody></table></div></div></span>以上所述是小編給大家介紹的BootStrap+Angularjs+NgDialog實現模式對話框，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！