BootStrap+Angularjs+NgDialog實現(xiàn)模式對話框

更新時間：2016年08月24日 11:06:44 投稿：mrr

在完成一個后臺管理系統(tǒng)時，需要用表格顯示注冊用戶的信息。但是用戶地址太長了，不好顯示。所以想做一個模式對話框，點擊詳細(xì)地址按鈕時，彈出對話框，顯示地址。下面小編給大家分享下實現(xiàn)方法，一起看下吧

本篇文章主要介紹了"angularjs+bootstrap+ngDialog實現(xiàn)模式對話框"，對于Javascript教程感興趣的同學(xué)可以參考一下：在完成一個后臺管理系統(tǒng)時，需要用表顯示注冊用戶的信息。但是用戶地址太長了，不好顯示。所以想做一個模式對話框，點擊詳細(xì)地址按鈕時，彈出對話框，顯示地址。

效果如下圖：

通過查閱資料，選擇使用ngDialog來實現(xiàn)，ngDialog是一個用于Angular.js應(yīng)用的模式對話框和彈出窗口。ngDialog非常?。?#63;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);
});
//點擊詳細(xì)地址按鈕時，跳出模式對話框
$scope.clickToAddress = function (address) {
$scope.address = address;
ngDialog.open({ template: 'views/test.html',//模式對話框內(nèi)容為test.html
className: 'ngdialog-theme-plain',
scope:$scope //將scope傳給test.html,以便顯示地址詳細(xì)信息
});
};
}])</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 (顯示用戶的信息，當(dāng)?shù)刂凡粸榭諘r，顯示詳細(xì)地址按鈕，并點擊按鈕時，調(diào)用controller中的clickToAddress函數(shù))

<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>默認(rèn)地址</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' ">系統(tǒng)默認(rèn)頭像</td>
<td ng-if="user.address.length == 0 ">暫無默認(rèn)地址</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">詳細(xì)地址</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實現(xiàn)模式對話框，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: