Bootstrap3でAngularJSを使用　modal | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

“Angular-ui bootstrap”を使用して、Bootstrap3のJavaScript部分をAngularJSに置き換えることができます。今回はmodalのサンプルを作成しました。
　
※オンラインマニュアル
Angular directives for Bootstrap

Angular-ui bootstrap : 2.5.0
AngularJS : 1.6.5
Bootstrap : 3.3.7
　

モーダル内で選択した値: {{ selected }}


<!DOCTYPE html>
<html ng-app="demoApp">
  <head>
......
    <script src="../js/angular-1.6.5.min.js"></script>
    <script src="../js/ui-bootstrap-tpls-2.5.0.min.js"></script>
    <link href="../js/app.js">
    <link href="../css/bootstrap-3.3.7.min.css" rel="stylesheet">
  </head>
.....
<div ng-controller="ModalDemoCtrl">
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
      <h3 class="modal-title">{{ title }}</h3>
    </div>
    <div class="modal-body">
      <ul>
        <li ng-repeat="item in items">
          <a ng-click="selected.item = item">{{ item }}</a>
        </li>
      </ul>
      選択した値: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="ok()">OK</button>
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
  </script>

  <button class="btn btn-default" ng-click="open()">Open me!</button>
  <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
  <button class="btn btn-default" ng-click="open('sm')">Small modal</button>
  <div ng-show="selected">モーダル内で選択した値: {{ selected }}</div>
</div>

var demoApp = angular.module('demoApp', ['ui.bootstrap']);

demoApp.controller("ModalDemoCtrl", function($scope, $uibModal, $log) {
  $scope.title = 'モーダルのタイトル';
  $scope.items = ['項目１', '項目２', '項目３'];
  $scope.open = function (size) {
    var modalInstance = $uibModal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        },
        title: function () {
          return $scope.title;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
});

demoApp.controller("ModalInstanceCtrl", function($scope, $uibModalInstance, items, title) {
  $scope.title = title
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $uibModalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

関連記事の目次

Bootstrap

Angular-ui bootstrap

ng-bootstrap（Angular2、Angular4）

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル