快捷導(dǎo)航

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

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

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

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

效果如下圖：

通過(guò)查閱資料，選擇使用ngDialog來(lái)實(shí)現(xiàn)，ngDialog是一個(gè)用于Angular.js應(yīng)用的模式對(duì)話框和彈出窗口。ngDialog非常?。?#63;2K），擁有簡(jiǎn)約的API，通過(guò)主題高度可定制的，具有唯一的依賴(lài)Angular.js。

ngDialog github地址: https://github.com/likeastore/ngDialog

ngDialog Demo : http://likeastore.github.io/ngDialog/

首先引入需要的ngdialog的js和css文件。

可通過(guò)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中注入依賴(lài)

<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);
});
//點(diǎn)擊詳細(xì)地址按鈕時(shí)，跳出模式對(duì)話框
$scope.clickToAddress = function (address) {
$scope.address = address;
ngDialog.open({ template: 'views/test.html',//模式對(duì)話框內(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>
手機(jī)號(hào)
</th>
<td>
{{address.phone}}
</td>
</tr>
</thead>
</table></span>

user.html (顯示用戶的信息，當(dāng)?shù)刂凡粸榭諘r(shí)，顯示詳細(xì)地址按鈕，并點(diǎn)擊按鈕時(shí)，調(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 ">暫無(wú)默認(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實(shí)現(xiàn)模式對(duì)話框，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: