我有一张用户表。当我点击用户名时,它必须显示一个引导模式。但是一旦关闭模式,表格页面就会被锁定,我无法点击任何其他用户的名字。页面已锁定。
代码就像,
<!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>
答案 0 :(得分:0)
找到解决方案。我正在使用angularjs1.4.8所以这个问题发生了!我尝试使用AngularJS 1.5.3并且它正常工作!