angular+bootstrap+MVC 之二，模态窗
本例实现一个bootstrap的模态窗
1、HTML代码
<!doctype html>
<!--suppress ALL -->
<html ng-app="appTow">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"><meta content="always" name="referrer">
<script src="angular.min.js"></script>
<script src="./Script/jquery-2.1.1.min.js"></script>
<link href="./Content/Plus/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="./Content/Plus/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<link href="./Skin/Default/css/site.css" rel="stylesheet"/>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<hr>
{{greeting}}
</div>
<div ng-controller="MyController1">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<li ng-repeat="x in names" ng-click="clickOneLi(x.Name,$index)">
{{ x.Name}}
</li>
<table>
<tr>
<td class="ruyeeTableTDLable"><span>Names</span></td>
<td class="ruyeeTableDataCell">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
<span>{{selectedItem}}</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="x in names">
<a href="#" ng-click="clickOneLi(x.Name,$index)">{{ x.Name}}</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
<button ng-click='modal_showModal()'>showModal</button>
<div class='modal fade'
tabindex='-1'
role='dialog'
aria-labelledby='myModalLabel'
aria-hidden='true'
id="myModal">
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' >
<span aria-hidden='true'>×</span>
<span class='sr-only'>关闭</span></button>
<h4 class='modal-title' id='myModalLabel'>
<span>系统提示</span>
</h4>
</div>
<div class='modal-body'>
<span >{{modal_selectedId}}:{{selectedItem}}</span>
</div>
<div class='modal-footer'>
<button type='button' data-dismiss='modal'class='btn btn-primary' >
取消
</button>
<button type='button' data-dismiss='modal' class='btn btn-primary'
ng-click='modal_okAction(modal_selectedId)'>
确定
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2、JS代码
// modal窗体封装
function modalWindow(angularObje, modalId, okAction) {
angularObje.modal_selectedId = "-1";
angularObje.modal_showModal = function () {
$('#' + modalId).modal();
}
angularObje.modal_okAction = function (item) {
if (typeof okAction == 'function')
okAction(item);
}
}
angular.module('appOne', [])
.controller('MyController',
function ($scope) {
$scope.username = 'World';
$scope.sayHello = function () {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
});
angular.module('appTow', ['appOne'])
.controller('MyController1',
function ($scope, $http) {
$scope.username = 'World002';
$scope.sayHello = function () {
$http.get("Data.json")
.success(function (response) {
$scope.names = response;
});
};
$scope.clickOneLi = function (item, index) {
$scope.selectedItem = item;
$scope.modal_selectedId = index;
$('#myModal').modal();
}
$scope.selectedItem = "Please select one";
/*region modal窗体*/
/*
// modal窗体简单实现
$scope.modal_selectedId="-1";
$scope.modal_showModal=function(){
$('#myModal').modal();
}
$scope.modal_okAction=function(id)
{
alert(id);
}
*/
modalWindow($scope, 'myModal', function (_) {
alert(_);
})
/*endregion modal窗体*/
});
angular+bootstrap+MVC 之二，模态窗的更多相关文章
- angular+bootstrap+MVC 之三，分页控件初级版
今天实现一个分页控件,效果如下: 1.HTML: <!doctype html> <!--suppress ALL --> <html ng-app="appT ...
- Bootstrap <基础三十二>模态框（Modal）插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- 解决jquery-ui-autocomplete选择列表被Bootstrap模态窗遮挡的问题
最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的一个编辑框提供了自动完成功能,用jQuery UI Autocomplete来实现. 因为我是W ...
- Bootstrap入门（二十三）JS插件1：模态框
Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...
- jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...
- 使用bootstrap的插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
- Bootstrap <基础十二>下拉菜单（Dropdowns）
Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...
- 带你初识Angular中MVC模型
简介 MVC是一种使用 MVC(Model View Controller 模型-视图-控制器)设计模式,该模型的理念也被许多框架所吸纳,比如,后端框架(Struts.Spring MVC等).前端框 ...
随机推荐
- cxf的soap风格+spirng4+maven 服务端
简介 SOAP 比较复杂,基于XML,有对应规范:REST利用HTTP请请求方式GET,POST,PUT,delete约定具体操作.简单的说,SOAP通过传输XML,XML定义了请求和响应的具体数据, ...
- SPSS常用基础操作（1）——变量分组
有时我们需要对数据资料按照某个规则进行归组,如 在上述资料中,想按照年龄进行分组,30岁以下为组1,30-40岁为组2,40岁以上为组3 有两种方法可以实现: 1.使用计算变量功能 <1> ...
- sql数剧操作语言
结构化查询语言SQL(STRUCTURED QUERY LANGUAGE)是最重要的关系数据库操作语言,并且它的影响已经超出数据库领域, 得到其他领域的重视和采用,如人工智能领域的数据检索,第四代软件 ...
- Ubuntu12.04安装64位系统出现编译错误error while loading shared libraries: libz.so.1: cannot open shared object file: No such file or dir
问题: Ubuntu12.04安装64位系统出现编译错误error while loading shared libraries: libz.so.1: cannot open shared obje ...
- App压力测试整理
压力测试结果:CRASH:崩溃,应用程序在使用过程中,非正常退出ANR:Application Not Responding MonkeyRunner APIs MonkeyRunner:用来连接设备 ...
- C#多线程 线程池
实例1:直接看看微软提供的代码 using System; using System.Threading; public class Example { public static void Main ...
- Linux有用命令
1.nohup命令 使用方法:nohup ./run.sh 作用:忽略所有挂断(SIGHUP)信号,不挂断地运行命令
- MySQL删除表数据
原文请点这里 在MySQL中有两种方法可以删除数据,一种是DELETE语句,另一种是TRUNCATE TABLE语句.DELETE语句可以通过WHERE对要删除的记录进行选择.而使用TRUNCATE ...
- Java成员初始化顺序
//类装载时: 1, 基类static成员 2, 派生类static成员 //创建对象时: 3, 基类构造函数 4, 派生类构造函数
- RoseRT 建模学习
目录: 一.RoseRT理论知识 二.一个完整模型的建立 三.TD-SCDMA(UE侧)RRC层建模的学习 四.LTE的RRC层建模(1.自主完成‘2.也可以是L2) 五.参考文献 一.RoseRT理 ...