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 showModalDialog 内跳转页面的问题
Nov 25 Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
vue构建单页面应用实战
Apr 10 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 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原创论坛
2006/10/09 PHP
php date()日期时间函数详解
2010/05/16 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
Python collections模块实例讲解
2014/04/07 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
幼儿园教学管理制度
2014/02/04 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
共青团员自我评价
2015/03/10 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
python异常中else的实例用法
2021/06/15 Python
python读取mnist数据集方法案例详解
2021/09/04 Python
Python中的嵌套循环详情
2022/03/23 Python