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等).前端框 ...
随机推荐
- 《Java虚拟机并发编程》学习笔记
对<Java虚拟机并发编程>这本书真的是相见恨晚.以前对并发编程只是懂个皮毛,这本书让我对并发编程有了一个全新的认识.所以把书上的知识点做下笔记,以便以后复习使用. 并发与并行 仔细说来, ...
- 关于OPencv版本不符合,相关库变化问题
由于OPencv发展迅速,已经省略了很多原来的库文件,奈何自己才疏学浅,所以只能把OPencv 1.0中的相关版本中的库文件一直过去. 链接: http://pan.baidu.com/s/1qY1Z ...
- $.getJSON( )的使用方法简介
JSON(JavaScript Object Notation)即JavaScript对象表示法,是一种轻量级的数据交换格式.它非常便于编程人员对数据的处理,也便于机器对数据的解析和生成,应用非常广泛 ...
- JS判断form内所有表单是否为空
function checkForm(){ var input_cart=document.getElementsByTagName("INPUT"); for(var i=0 ...
- React Native 文本输入
TextInput是一个允许用户输入文本的基础组件.它有一个名为onChangeText的属性,此属性接受一个函数,而此函数会在文本变化时被调用.另外还有一个名为onSubmitEditing的属性, ...
- asp.net页面跳转sessionid会变
今天发现在一个Asp.net站点中, 同一次登录, 不停刷新页面或者页面跳转, 此时后台Session的SessionID总是变化的. 创建一个页面,添加一个button,后台代码非常简单,如下 ...
- EXCEPT差集运算
EXCEPT差集运算在逻辑上先删除两个输入多集中的重复行,把多集变成集合,然后返回只在第一个集合中出现,在第二个集合中不出现的所有行.可以看下面示意图.
- 做办公用品、文具方面的 B2C 是否有前景呢?
企乐买现在正在做这方面的事,从市场角度来说需求是有的,客单价和重复购买率都还可以,但是也存在几个致命问题使得施展不开举步维艰: 1.中国特有的市场环境:在美国企业办公用品一般都是网上采购,避免灰色的东 ...
- leetcode N-Queens/N-Queens II, backtracking, hdu 2553 count N-Queens, dfs 分类: leetcode hdoj 2015-07-09 02:07 102人阅读 评论(0) 收藏
for the backtracking part, thanks to the video of stanford cs106b lecture 10 by Julie Zelenski for t ...
- 黑马程序员——OC语言 核心语法 (3)
Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)分类Category 1) 基本用途 如何在不改变原来类模型的前提下 ...