zoukankan      html  css  js  c++  java
  • 关于angularjs的model的一些问题

    有的时候 在一些页面中 我们会需要用到弹出的模态框,这里主要是使用angularjs的uimodel。

    页面效果如下:

     首先我们需要在JS的controller中导入$uibModal模块。

    HTML

    <div>
    <button class="btn"  ng-click="openModel(photoId)">打开模态</button>
    
    <script type="text/ng-template" id="addPhoto.html"> 
            <div class="modal-header"> 
                <h3 class="modal-title">图片展示</h3>
            </div>
            <div class="modal-body">
               <img ng-src="{{photoUrl}}" style="max-500px;max-height:500px;margin:0 auto;display:block;" />
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">
                 {{'help.ok' | translate}}
                </button>
                <button class="btn btn-warning" ng-click="cancel()">{{'help.cancel' | translate}}</button>
            </div>
        </script>
    
    
    
    
    </div>

    JS

    myapp.controller('xxxCtrl', function ($scope, $state, $http, $stateParams,$uibModal) {
          //打开模态的按钮事件
           $scope.openModel=function(photoId){
    
            var modalInstance = $uibModal.open({
    
            templateUrl : 'addPhoto.html', 
            controller : 'addPhotoContrl',
            //模态的尺寸
            size : 'lg', 
            //传递的参数
            resolve : {
               photoId: function(){
                   return photoId;
                    }
                 }
             })
            //关闭模态执行的事件
            modalInstance.result.then(function () { 
    
                 xxxxx;
             });
    
          }
    
        })
    myapp.controller('addPhotoContrl', function ($scope, $state, $http, $stateParams,$uibModalInstance,photoId) {       
        
        //获取图片url photoId是作为参数传递进来的
        $http.get('getPhotoUrl'+photoId)
         .success(function(data){
             $scope.photoUrl=data;
         })
         
         $scope.ok = function () { 
            //关闭模态并且执行事件
             $uibModalInstance.close();  
        };  
      $scope.cancel = function () { 
          //只关闭模态
          $uibModalInstance.dismiss('cancel');  
      };  
    })

     PS:

      有的 时候模态框会根据数据长度变长 导致在一个页面内看不全所有的模态框信息,这个时候就需要给模态框加上滚动条。

     如图:

    如此需要在 class  modal-body   后加入css:

    .addoverflow{
    overflow-y: scroll;
    height: 450px;
    }

    如此就加入垂直的滚动条,水平的滚动条同理可以加入。 使用overflow-x属性。

    
    
    
  • 相关阅读:
    动态规划——Best Time to Buy and Sell Stock IV
    动态规划——Split Array Largest Sum
    动态规划——Burst Ballons
    动态规划——Best Time to Buy and Sell Stock III
    动态规划——Edit Distance
    动态规划——Longest Valid Parentheses
    动态规划——Valid Permutations for DI Sequence
    构建之法阅读笔记05
    构建之法阅读笔记04
    构建之法阅读笔记03
  • 原文地址:https://www.cnblogs.com/wangzun/p/6649922.html
Copyright © 2011-2022 走看看