本例实现一个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. c-free

  2. Yii 验证输入框是否输入的是数字

    在对应的Model文件的rules中加入如下代码: array('age,phone', 'numerical', 'integerOnly'=>true,'message'=>'{att ...

  3. PHPMySQL 中 pdo文件的增删改查

    <?php //PDO类的增删改查 try { $pdo = new PDO("mysql:host=localhost;dbname=ooo","root&quo ...

  4. JDE Client开发端 左侧边栏设置

  5. iOS_autoLayout_Masonry

        概述     Masonry是一个轻量级的布局框架与更好的包装AutoLayout语法.   Masonry有它自己的布局方式,描述NSLayoutConstraints使布局代码更简洁易读. ...

  6. 通过top命令发现plymouthd进程cpu负载达到近100% 解决办法

    最近几天一直遇到服务器cpu100%, 通过top命令发现plymouthd进程cpu负载达到近100% 解决方法:打开 /boot/grub/menu.lst , 去掉 “rhgb quiet”这两 ...

  7. STL模板之_map,stack(计算矩阵相乘的次数）

    #include <map>#include <stack>#include <iostream>using namespace std; struct Node ...

  8. Python time模块学习

    Python time模块提供了一些用于管理时间和日期的C库函数,由于它绑定到底层C实现,因此一些细节会基于具体的平台. 一.壁挂钟时间 1.time() time模块的核心函数time(),它返回纪 ...

  9. iOS学习之应用数据存储1－属性列表、偏好设置、NSKeyedArchiver归档

    iOS应用数据存储的常用方式(持久化方式) 属性列表(plist)归档(XML文件) Preference(偏好设置) NSKeyedArchiver归档(NSCoding) SQLite3 Core ...

  10. Golang Clearing slice

    //first method : slice = nil // second method : slice = slice[0:0] Source page : https://www.socketl ...