首页 > 代码库 > angular弹出层实现
angular弹出层实现
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中的内容
angular弹出层实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。