angular点击按钮弹出页面_[angular] - angular中弹出框的简单示例

0、引入文件

link rel="stylesheet" href="/bootstrap.min.css">

1、单击按钮打开模态窗

a type="submit" class="btn btn-primary btn-addon pull-left" ng-click="open('lg',data.openId)" >查看历史

2、单击事件代码

$scope.open = function(size,openId) { var modalInstance = $modal.open({ templateUrl : 'myModelContent1.html', // controller : 'ModalHisCtrl', // specify controller for modal size : size, resolve : { host : function(){ return $scope.app.host; }, openId : function(){ return openId; //得到html页面中的数据 } } }); modalInstance.result.then(function(selectedItem) { }, function() { $log.info('Modal dismissed at: ' + new Date()); }); }

3、模板控制器

app.controller('ModalHisCtrl', function($scope,$http, $modalInstance,host,openId){ $scope.gethisList = function(page,size,callback){ var url = host + 'experience/student/buy/list?requestId=123456'; $http.post(url,{ "currentPage":page, "pageSize":size, "openId": openId //以参数的形式获得 }).success(function(data){ if(data.message == "Success"){ $scope.results = data.result; $scope.totalPage = data.result.totalPage; callback && callback(data.result); } }).error(function(data){ console.log("fail"); }); }; $scope.cancel = function () { $modalInstance.close(); }; });

4、模板html

暂无数据

序号	订单号	支付金额	创建时间
{{$index+1}}	{{data.orderNumber}}	{{data.paymentAmount}}	{{data.createTime | date:'yyyy-MM-dd hh:mm:ss'}}

关闭