BootStrap+Angularjs+NgDialog实现模式对话框


Posted in Javascript onAugust 24, 2016

本篇文章主要介绍了"angularjs+bootstrap+ngDialog实现模式对话框",对于Javascript教程感兴趣的同学可以参考一下: 在完成一个后台管理系统时,需要用表显示注册用户的信息。但是用户地址太长了,不好显示。所以想做一个模式对话框,点击详细地址按钮时,弹出对话框,显示地址。

效果如下图:

BootStrap+Angularjs+NgDialog实现模式对话框

BootStrap+Angularjs+NgDialog实现模式对话框

通过查阅资料,选择使用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.html
className: '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实现模式对话框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript getElementsByName()的用法说明
Jul 31 Javascript
JavaScript 字符串乘法
Aug 20 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 #Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 #Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 #Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 #Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 #Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 #Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 #Javascript
You might like
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
Python 制作糗事百科爬虫实例
2016/09/22 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python科学计算之narray对象用法
2019/11/25 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
橄榄树药房:OLIVEDA
2019/09/01 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
自我推荐书
2013/12/04 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python