本例实现一个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. Ubuntu 16.04.1下修改MySQL默认编码

    在Ubuntu 下配置 MySQL 的字符编码.安装完 MySQL 后,系统默认的字符编码是 latin1 ,输入的是中文,可是输出却是一堆乱码.现在要做的就是把 MySQL的默认字符编码设置为支持中 ...

  2. 加强型无穷集合：InfiniteList<T>，可指定遍历方向和偏移量，只要集合有元素并且偏移量不为 0，将永远遍历下去。

    主类: public class InfiniteList<T> : IEnumerable<T> { public List<T> SourceList { ge ...

  3. freemarker if elseif

    FreeMarker模板 if, else, elseif 指令 : if, else, elseif 语法 <#if condition> ... <#elseif conditi ...

  4. C#中combobox不可编辑与不可选择

    不可编辑:comboBox.DropDownStyle = System.Windows.Forms.ComboBoxStyle.DropDownList; 将Style属性改为csDropDownL ...

  5. apanda安装

  6. echsop常用模板方法.

    echsop模板遍历文件: {foreach from=$goods_list item=goods} {$goods.name} {/foreach} 不知道为什么ecshop中foreach像个注 ...

  7. java selenium 题目一 如果定位动态变化的id

    题目 HTML 代码如下 <a id="username-1190" class="class1">用户名</a> 因为id是由java ...

  8. Node.js GET/POST请求

    在很多场景中,我们的服务器都需要跟用户的浏览器打交道,如表单提交. 表单提交到服务器一般都使用GET/POST请求. 我将为大家介绍 Node.js GET/POST请求. 获取GET请求内容 由于G ...

  9. samba服务--路径太深问题-转

  10. VMware Workstation 10.0.4.2249910 CN

    VMware Workstation 10.0.4.2249910.exe Workstation10.0.4修复了微软Windows 8.1和Windows Server 2012操作系统中的内存问 ...