index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body ng-controller="myCtrl" >
<script src="js/libs/angular-1.3.0.js"></script>
<script src="js/app.js"></script>
<div ng-click="myModel.show()">1111</div>
<div ng-show="myModel.isShow">
<div id="myModal" class="modal" style="display: block;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel"><span ng-bind="myModel.title"></span></h3>
</div>
<div class="modal-body">
<p ng-repeat="list in myModel.data"><span ng-bind="list.name"></span></p>
</div>
<div class="modal-footer">
<button class="btn" ng-click="myModel.hide()">关闭</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<div class="modal-backdrop fade in"></div>
</div>
</body>
</html>
//app.js
angular.module("myApp",[]).controller("myCtrl",[‘$scope‘,function($scope){
$scope.myModel={
isShow:false,
title: ‘编辑课程‘,
data:{},
show:function () {
this.isShow=true;
},
hide:function () {
this.isShow=false;
}
}
$scope.myModel.data=[{‘name‘:‘111111‘},{"name":‘123‘}]
}])
引入bootstrap.css，angular.js, app.js 弹出框的实现原理就是控制 iShow 的值通过ng-show来控制是否显示 其中 $scope.myModel.data来设置model中的内容
<!– 课时编辑 –>
课程
{{editModal.data.curriculum_name}}
*
章节
{{editModal.data.chapter_name}}
*
确定
取消
-->
时间： 2024-10-24 03:46:57