你的位置:首页 > Java教程

[Java教程]AngularJS 模态对话框


本文内容

Angular JS 实现模式对话框。基于 AngularJS v1.5.3 和 Bootstrap v3.3.6。

项目结构

2016-04-07_102306 

图 1 项目结构

运行结果

2016-04-07_1042482016-04-07_104303

图 1 运行结果:大模态

index.html

<!DOCTYPE html>
<!--[if lt IE 7]>   <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>     <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>     <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>AngularJS 模态对话框</title>
<link rel="stylesheet"
  href="../src/vendor/bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="myApp" class="body">
  <!-- modal template -->
  <script type="text/ng-template" id="myModelContent.html">
    <div class="modal-header">
      <h3 class="modal-title">模态框</h3>
    </div>
    <div class="modal-body">
      <ul>
        <li ng-repeat="item in items">
        <a ng-click="selected.item = item">{{item}}</a>
        </li>
        <div class="h2">当前选择: <b>{{selected.item}}</b></div>
      </ul>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="ok()">
      确认
      </button>
      <button class="btn btn-warning" ng-click="cancel()">退出</button>
    </div>
  </script>
  
  <div class="container h1">AngularJS 模态对话框</div>
  <section class="row">
    <section ng-controller="modalDemo" class="col-md-6"
      style="margin: 40px auto; float: none; background: #fff; padding: 30px;">
      <button class="btn btn-default" ng-click="open('lg')">大模态</button>
      <button class="btn btn-default" ng-click="open()">中模态</button>
      <button class="btn btn-default" ng-click="open('sm')">小模态</button>
      <hr>
      <div class="h1" ng-show="selected">当前选择:{{selected}}</div>
    </section>
  </section>
  <!-- load js -->
  <script src="../src/vendor/angular/angular.js"></script>
  <script
    src="http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
  <script src="../src/js/mymodal.js"></script>
</body>
</html>

mymodal.js

/**
 * 
 */
angular.module('myApp', [ 'ui.bootstrap' ])
// demo controller
.controller('modalDemo', function($scope, $modal, $log) {
  // list
  $scope.items = [ 'angularjs', 'backbone', 'canjs', 'Ember', 'react' ];
  // open click
  $scope.open = function(size) {
    var modalInstance = $modal.open({
      templateUrl : 'myModelContent.html',
      controller : 'ModalInstanceCtrl', // specify controller for modal
      size : size,
      resolve : {
        items : function() {
          return $scope.items;
        }
      }
    });
    // modal return result
    modalInstance.result.then(function(selectedItem) {
      $scope.selected = selectedItem;
    }, function() {
      $log.info('Modal dismissed at: ' + new Date())
    });
  }
})
// modal controller
.controller('ModalInstanceCtrl', function($scope, $modalInstance, items) {
  
  $scope.items = items;
  
  $scope.selected = {
    item : $scope.items[0]
  };
  // ok click
  $scope.ok = function() {
    $modalInstance.close($scope.selected.item);
  };
  // cancel click
  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  }
});