-8
私はユーザーのテーブルを持っています。ユーザー名をクリックすると、ブートストラップモーダルが表示されます。しかし、モーダルを閉じると、テーブルページはロックされ、他のユーザーの名前をクリックすることはできません。ページがロックされています。ブートストラップモーダルが閉じられると、ビューページは無効になります。 （AngularJS）
コードは次のようなり、
<!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":"[email protected]","country":"Indonesia","ip_address":"29.107.35.8"},
{"id":2,"first_name":"Judith","last_name":"Austin","email":"[email protected]","country":"China","ip_address":"173.65.94.30"},
{"id":3,"first_name":"Julie","last_name":"Wells","email":"[email protected]","country":"Finland","ip_address":"9.100.80.145"},
{"id":4,"first_name":"Gloria","last_name":"Greene","email":"[email protected]","country":"Indonesia","ip_address":"69.115.85.157"},
{"id":50,"first_name":"Andrea","last_name":"Greene","email":"[email protected]","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>
ここでコードを共有できますか？ –
うん！その共有！ – Apuroop
ありがとう！ 解決策を見つけました。 この問題が発生したので、angularjs1.4.8を使用していました。私はAngularJS 1.5.3を使ってみましたが、正しく動作しました！ – Apuroop