本例实现一个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'>&times;</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 之二，模态窗的更多相关文章

  1. angular+bootstrap+MVC 之三，分页控件初级版

    今天实现一个分页控件,效果如下: 1.HTML: <!doctype html> <!--suppress ALL --> <html ng-app="appT ...

  2. Bootstrap <基础三十二>模态框（Modal）插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  3. 解决jquery-ui-autocomplete选择列表被Bootstrap模态窗遮挡的问题

    最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的一个编辑框提供了自动完成功能,用jQuery UI Autocomplete来实现. 因为我是W ...

  4. Bootstrap入门（二十三）JS插件1：模态框

    Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...

  5. jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法

    转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...

  6. 使用bootstrap的插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  7. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  8. Bootstrap <基础十二>下拉菜单（Dropdowns）

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

  9. 带你初识Angular中MVC模型

    简介 MVC是一种使用 MVC(Model View Controller 模型-视图-控制器)设计模式,该模型的理念也被许多框架所吸纳,比如,后端框架(Struts.Spring MVC等).前端框 ...

随机推荐

  1. MVC4中的Display Mode简介

    本文地址:http://www.cnblogs.com/egger/p/3400076.html  欢迎转载 ,请保留此链接๑•́ ₃•̀๑! 今天学习MVC4时,看到一个不错的特性"vie ...

  2. break和continue的区别

    break是结束整个循环体,continue是结束单次循环

  3. zju 1002

    // zju 1002 // #include "stdafx.h" #include <string> #include <iostream> using ...

  4. OPencv1.0配置vs2010（介于OPencv的经典之作。都是OPencv1.0为基础的。）

    首先下载OPencv1.0 我在之前的博客中写了下载的资源http://www.cnblogs.com/xiaochige/p/5990858.html 把OPencv1.0中bin文件夹下的所有内容 ...

  5. A:石头剪刀布

    总时间限制: 1000ms 内存限制: 65536kB描述石头剪刀布是常见的猜拳游戏.石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一样,则不分胜负.一天,小A和小B正好在玩石头剪刀布.已知他们的出拳 ...

  6. Java之美[从菜鸟到高手演变]之设计模式

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  7. 读《程序员的SQL金典》[3]--表连接、子查询

    一.表连接-JOIN 1. 自连接实例 查询类型相同的订单信息. SELECT O1 .*,O2.* FROM T_Order O1 JOIN T_Order O2 ON O1 .FTypeId= O ...

  8. Struts2+Hibernate+Spring 整合示例[转]

    原文 http://blog.csdn.net/tkd03072010/article/details/7468769 Spring整合Struts2.Hibernate原理概述: 从用户角度来看,用 ...

  9. ASIHTTPRequest下载示例（支持断点续传）

    一.创建网络请求队列 首先,创建网络请求队列,如下: ASINetworkQueue   *que = [[ASINetworkQueue alloc] init]; self.netWorkQueu ...

  10. PowerMock遇到的问题——5

    在做单元测试时,有时在一个方法中会调用这个类的其他私有方法,那么如何指定这些方法的返回值呢? 解决方法:用 createPartialMock 具体用法如下: TestClass test=Power ...