angular弹出层实现

最新推荐文章于 2022-03-18 11:18:43 发布

weixin_30609287

最新推荐文章于 2022-03-18 11:18:43 发布

阅读量340

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/heyinwangchuan/p/6551112.html

版权

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

转载于:https://www.cnblogs.com/heyinwangchuan/p/6551112.html

weixin_30609287

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular弹出层实现

index.html<!DOCTYPE html><html ng-app="myApp"><head> <meta charset="UTF-8"> <title>Title</title> <link href="bootstrap.css" rel="stylesheet"...
复制链接

扫一扫