BootStrap+Angularjs+NgDialog實現強制回應對話方塊_AngularJS

本篇文章主要介紹了"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 class="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 class="panel panel-warning"><div class="panel-heading">使用者管理</div><div class="row"><div class="col-lg-8"></div><div class="col-lg-4"><div class="input-group"><input type="text" class="form-control" placeholder="Search for..." ng-model='search'><span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span></div></div></div><table class="table"><thead><th>姓名</th><th>餘額 <span class="glyphicon glyphicon-flash" 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" class="btn btn-info navbar-btn">詳細地址</button></td><td><button type="button" class="btn btn-warning navbar-btn" ng-click="remove(user._id)">刪除</button></td></tr></tbody></table></div></div></span>

以上所述是小編給大家介紹的BootStrap+Angularjs+NgDialog實現強制回應對話方塊，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！