本例实现一个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. 电脑的f5刷新不了

    新买的电脑,f5刷新不了页面,网上查了后发现是fn功能键的原因.同时fn+f5即可刷新.可是依然感觉好别扭... 按下fn+esc,再只按f5,就可以刷新页面了.神奇...

  2. 6/14 Sprint2 看板和燃尽图

    中间部分还需要改进 小组评分:(团队总分为80) 团队成员:        101丘娟同学:21        107杨晓霞同学:18        108周诗琦同学:22        124陈程同 ...

  3. android log

    from 点击打开链接  使用Android logcat 对我们开发.调试Android程序有很大的帮助!通过logcat,我们可以非常方便的了解到程序的执行情况,判断出错代码位置. 最简单的log ...

  4. 读javascript高级程序设计01-基本概念、数据类型、函数

    一. javascript构成 1.javascript实现由三部分组成: ECMAScript:核心语言功能 DOM:文档对象模型,提供访问和操作网页内容的方法和接口 BOM:浏览器对象模型,提供与 ...

  5. [转] 深入探讨C++中的引用

    引用是C++引入的新语言特性,是C++常用的一个重要内容之一,正确.灵活地使用引用,可以使程序简洁.高效.我在工作中发现,许多人使用它仅仅是想当然,在某些微妙的场合,很容易出错,究其原由,大多因为没有 ...

  6. iOS开发网络篇—发送json数据给服务器以及多值参数

    iOS开发网络篇—发送json数据给服务器以及多值参数 一.发送JSON数据给服务器 发送JSON数据给服务器的步骤: (1)一定要使用POST请求 (2)设置请求头 (3)设置JSON数据为请求体 ...

  7. Linux diable ipv6

    在RHEL 5下面测试成功     linux下面禁止ipv6的方法: 来自: 杨志刚 博客 (http://yangzhigang.cublog.cn)   这里我所做的是Redhat Linux, ...

  8. LG1268树的重量

    #include<bits/stdc++.h> using namespace std; #define N 35 #define INF 1e9 int dis[N][N],n,len, ...

  9. Annotation注解（有源代码）

    注解(annotation)概述: ·从JDK5.0 开始,java增加了对元数据(MetaData)的支持,也就是Annotation(注解) ·Annotation其实就是代码里的特殊标记,这些标 ...

  10. Android四大组件之Activity(活动)及其布局的创建与加载布局

    Android四大组件之Activity(活动)及其布局的创建与加载布局 什么是Activity ? 活动(Activity)是包含用户界面的组件,主要用于和用户进行交互的,一个应用程序中可以包含零个 ...