关闭引导模式后,将禁用视图页面。 (AngularJS)

时间:2016-06-22 13:31:24

标签: angularjs twitter-bootstrap bootstrap-modal

我有一张用户表。当我点击用户名时,它必须显示一个引导模式。但是一旦关闭模式,表格页面就会被锁定,我无法点击任何其他用户的名字。页面已锁定。

代码就像,

<!DOCTYPE html>
<html>
<head>
<title>TAble</title>
<style>
table, th{
    border: 1px solid Green;border-collapse : collapse;
    margin:25px;
    text-align:center;
}
td {
    border: 1px solid Green;
}
th{
    padding: 5px;
    Font-size:110%;
}
</style>

</head>

<body ng-app="myApp">
<script src="1.4.8/angular.js"></script>


<script src="angular-ui-router.js"></script>


<script src="angular-animate.js"></script>
<script src="ui-bootstrap-tpls-1.3.3.js"></script>
    <script src="ng-table.js"></script>

<link rel="stylesheet" href="ng-table.min.css">

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">

<body ng-app="myApp">
<div ng-controller="tableController">
{{test}}
<table ng-table="usersTable" style="width:85%" class="table table-striped">
   <tr ng-repeat="x in data" >
       <td data-title="'Id'" filter="{ Id: 'number'}">
           <a ng-click='open(x)'>{{x.id}}</a>
       </td>
       <td data-title="'First Name'">
           {{x.first_name}}
       </td>
       <td data-title="'Last Name'">
           {{x.last_name}}
       </td>    
       <td data-title="'e-mail'" >
           {{x.email}}
       </td>    
       <td data-title="'Country'">
           {{x.country}}
       </td>    
       <td data-title="'IP'" >
           {{x.ip_address}}
       </td>    
   </tr>
</table>
</div>



</body>

<script>
var app = angular.module('myApp',['ngTable','ui.router','ngAnimate', 'ui.bootstrap']);

app.controller('tableController',function($scope,$uibModal,$filter,ngTableParams)
{
   $scope.customers = [{"id":1,"first_name":"Philip","last_name":"Kim","email":"pkim0@mediafire.com","country":"Indonesia","ip_address":"29.107.35.8"},
                        {"id":2,"first_name":"Judith","last_name":"Austin","email":"jaustin1@mapquest.com","country":"China","ip_address":"173.65.94.30"},
                        {"id":3,"first_name":"Julie","last_name":"Wells","email":"jwells2@illinois.edu","country":"Finland","ip_address":"9.100.80.145"},
                        {"id":4,"first_name":"Gloria","last_name":"Greene","email":"ggreene3@blogs.com","country":"Indonesia","ip_address":"69.115.85.157"},
                        {"id":50,"first_name":"Andrea","last_name":"Greene","email":"agreene4@fda.gov","country":"Russia","ip_address":"128.72.13.52"}];

$scope.usersTable = new ngTableParams({ },
                {                
                    getData: function ($defer, params) {
                    count:[], 
                 $scope.data = params.filter() ? $filter('filter')($scope.customers, params.filter()) : $scope.data;
                    $defer.resolve($scope.data);
                }
            }); 


$scope.localID=0;
$scope.count=2;

$scope.open = function(w) {

    var modalInstance = $uibModal.open({
      animation: true,
      template: '<h1>Hello</h1>',
      controller: 'ModalInstanceCtrl',
      backdrop:false,
      keyboard:true,
      size:'Lg',
      resolve: {
        customers: function () {
          return w;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    });
  };

});
app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance,customers) {

  $scope.data = customers;

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
    });
</script>

</html>

1 个答案:

答案 0 :(得分:0)

找到解决方案。我正在使用angularjs1.4.8所以这个问题发生了!我尝试使用AngularJS 1.5.3并且它正常工作!