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中的内容