angularJs摸态框实例加详细注解
来源:互联网 发布:会员软件制度 编辑:程序博客网 时间:2024/05/20 06:50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<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>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-click="modalShow()">angular模态框</div>
<p>you selected {{item}}</p>
<!-- 模态框区域 -->
<script type="text/ng-template" id="modalContent.html">
<div>
<div ng-repeat="item in items" ng-click="select($index)">item: {{item}}</div>
<p>you selected {{item}}</p>
<button ng-click="ready()">确定</button>
<button ng-click="cancel()">取消</button>
</div>
</script>
<script>
angular.module('myApp',['ui.bootstrap']).controller('myCtrl',function($scope,$modal,$log){
$scope.modalShow = function(size){
$scope.items = ["1","2","3"];
// 定义模态框
var modalInstance = $modal.open({
templateUrl : 'modalContent.html', // 摸态框视图
controller : 'modalInstanceCtrl', // 名字自定义,摸态框控制器
size : size, // 摸态框大小配置,值为"lg","sm"
resolve : { // 从当前控制器传值到模态框控制器中
items : function(){
return $scope.items;
}
}
})
// 摸态框关闭时执行,第一个函数close()后执行,第二个函数dismiss()后执行
modalInstance.result.then(function(item){
$scope.item = item;
},function(item){
console.log("dismissed:"+item);
})
}
})
angular.module('myApp').controller('modalInstanceCtrl',function($scope,$modalInstance,items){
$scope.items = items;
$scope.select = function(index){
$scope.item = $scope.items[index];
}
$scope.ready = function(){
// 关闭摸态框并传回数据
$modalInstance.close($scope.item);
}
$scope.cancel = function(){
// 关闭摸态框并传回数据
$modalInstance.dismiss($scope.item);
}
})
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<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>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-click="modalShow()">angular模态框</div>
<p>you selected {{item}}</p>
<!-- 模态框区域 -->
<script type="text/ng-template" id="modalContent.html">
<div>
<div ng-repeat="item in items" ng-click="select($index)">item: {{item}}</div>
<p>you selected {{item}}</p>
<button ng-click="ready()">确定</button>
<button ng-click="cancel()">取消</button>
</div>
</script>
<script>
angular.module('myApp',['ui.bootstrap']).controller('myCtrl',function($scope,$modal,$log){
$scope.modalShow = function(size){
$scope.items = ["1","2","3"];
// 定义模态框
var modalInstance = $modal.open({
templateUrl : 'modalContent.html', // 摸态框视图
controller : 'modalInstanceCtrl', // 名字自定义,摸态框控制器
size : size, // 摸态框大小配置,值为"lg","sm"
resolve : { // 从当前控制器传值到模态框控制器中
items : function(){
return $scope.items;
}
}
})
// 摸态框关闭时执行,第一个函数close()后执行,第二个函数dismiss()后执行
modalInstance.result.then(function(item){
$scope.item = item;
},function(item){
console.log("dismissed:"+item);
})
}
})
angular.module('myApp').controller('modalInstanceCtrl',function($scope,$modalInstance,items){
$scope.items = items;
$scope.select = function(index){
$scope.item = $scope.items[index];
}
$scope.ready = function(){
// 关闭摸态框并传回数据
$modalInstance.close($scope.item);
}
$scope.cancel = function(){
// 关闭摸态框并传回数据
$modalInstance.dismiss($scope.item);
}
})
</script>
</body>
</html>
1 0
- angularJs摸态框实例加详细注解
- sprintf函数的用法---详细加注解
- angularJS 实例
- C反汇编实例(详细注解版)(一)
- C反汇编实例(详细注解版)(二)
- C反汇编实例(详细注解版)(三)
- C反汇编实例(详细注解版)(一)
- C反汇编实例(详细注解版)(二)
- C反汇编实例(详细注解版)(三)
- 注解详细
- SSH整合加注解
- SqlMapConfig配置加注解
- AngularJS select详细用法
- 双色表格CSS实例,在网上找的,不过我加了一些注解
- 【AngularJS】购物车实例
- AngularJS 购物车实例
- angularjs directive 实例 详解
- AngularJS 应用实例
- 30分钟初步掌握LaTeX--转自新浪博客
- 20个排序好的数组,每个数组500个数,按照降序排序好的,让找出500个最大的数。
- 【ife】任务四十二:UI组件之日历组件(三)
- svn 常见错误
- Android Tombstone 分析
- angularJs摸态框实例加详细注解
- java 切面编程 AOP(Aspect oriented program)
- Android Design Support Library - FloatingActionButton
- UIButton的常见设置
- 积极管理---要了解各自的同学,也要了解各自的计划.
- “Gradle Version 3.2 is required.” Error
- 关于html的表单
- MyBatis在Spring中简单配置
- 编译原理作业,一介逻辑公式实例化