angular $modal 模態框
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
引入了angular-ui-bootstrap插件
<title>Document</title>
</head>
<body ng-app="app">
<div class="body" style="margin: 200px auto;padding: 50px;background: lightcoral;" ng-controller="myModal">
<button class="btn btn-warning btn-lg" ng-click="open('lg')">大</button>
<button class="btn btn-warning" ng-click="open()">中</button>
<button class="btn btn-warning btn-sm" ng-click="open('sm')">小</button>
</div>
</body>
</html>
設置了3個按鈕 大的模態框，中的和小的。對應着bootstrap 中的modal樣式
在另外一個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>
當前選擇： <b>{{selected.item}}</b>
</ul>
</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 部分
angular.module('app',['ui.bootstrap']).controller('myModal',function ($scope,$modal) {
$scope.items = ['h5', 'c3', 'js'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'modal.html', //指向上面建立的視圖
controller: 'Ctrl',// 初始化模態範圍 對應着下面Controller
size: size, //大小配置 size是變量，根據open裏面參數
resolve: {
items: function () {
return $scope.items;
}
}
})
}
})
.controller('Ctrl',function ($scope,$modalInstance,items) {
$scope.items = items; 對話框裏面顯示items數組的參數
})
親測，可用
相關文章
- 1. angular $modal模態框
- 2. Modal模態框
- 3. Bootstrap 模態框（Modal）
- 4. bootstrap modal模態框
- 5. 彈出框（模態框）modal
- 6. Bootstrap 模態框（Modal）插件
- 7. Bootstrap 模態框(Modal)插件
- 8. Bootstrap 模態框（Modal）使用
- 9. bootstrap中的模態框（modal，彈出層）
- 10. 重置 Bootstrap modal 模態框數據
- 更多相關文章...
- • ionic 模態窗口 - ionic 教程
- • ionic 浮動框 - ionic 教程
- • 委託模式
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
