您现在的位置是: 首页 » 网页代码 » angular怎么实现点击按钮弹出对话框
网页代码

angular怎么实现点击按钮弹出对话框

网站优化小编一月 5, 2020 15人已围观

angular点击按钮弹出对话框的方法:为单击按钮添加一个$modal的open事件即可。如<a type="submit" class="btn " ng-click="open()"></a>。

网站运营中栏目排名优化技巧

基本方法讲解

$modal是一个创建模态窗口的服务,仅有一个方法open(options)

1、参数如下:

  • templateUrl:模态窗口的地址

  • template:用于显示html标签

  • scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope

  • controller:为$modal指定的控制器,初始化$scope,该控制器可用$modalInstance注入

  • resolve:定义一个成员并将他传递给$modal指定的控制器,相当于routes的一个reslove属性,如果需要传递一个objec对象,需要使用angular.copy()

  • backdrop:控制背景,允许的值:true(默认),false(无背景),“static” - 背景是存在的,但点击模态窗口之外时,模态窗口不关闭

  • keyboard:当按下Esc时,模态对话框是否关闭,默认为ture

  • wndowClass:指定一个class并被添加到模态窗口中

2、open方法返回一个模态实例,该实例属性:

  • close(result):关闭模态窗口并传递一个结果

  • dismiss(reason):撤销模态方法并传递一个原因

  • result:一个契约,当模态窗口被关闭或撤销时传递

  • opened:一个契约,当模态窗口打开并且加载完内容时传递的变量

另,$modalInstance扩展了两个方法$close(result)、$dismiss(reason),容易关闭窗口并不需额外的控制器

angular点击按钮弹出对话框的方法:

代码实现

0、引入文件

link rel="stylesheet" href="/bootstrap.min.css">
<script src="angularjs/1.2.5/angular.min.js">
</script>
<script src="angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js">
</script>

1、单击按钮打开模态窗

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

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

<script type="text/ng-template" id="myModelContent1.html"> 
<div class="modal-header"> 对话框题目 </div> 
<div class="modal-body" ng-init="gethisList(1,10)">
 <h5 ng-if="results.list.length<=0">暂无数据</h5> 
 <table class="table table-striped b-t b-light" ng-if="results.list.length"> <thead> 
 <tr> <th>序号</th> <th>订单号</th> <th>支付金额</th> <th>创建时间</th> </tr> </thead> <
 tbody> <tr ng-repeat="data in results.list"> <td>{{$index+1}}</td>
  <td>{{data.orderNumber}}</td> <td>{{data.paymentAmount}}</td> 
  <td>{{data.createTime | date:'yyyy-MM-dd hh:mm:ss'}}</td> 
  </tr> </tbody> </table> </div>
   <div class="modal-footer"> <button class="btn btn-default" ng-click="cancel()">关闭</button> 
   </div> </script>

附录

浏览器对话框:

  var r=confirm("确定已--?");    
  if(!r){       
   return;
    }

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:263天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:3911 条
  • 文章评论:104 条
  • 微信公众号:扫描二维码,关注我们