ng-repeat 复选框单击不切换 [=10th=] 可见性
ng-repeat checbox click not toggling div visibility
我正在使用 ng-repeat 来获取项目列表。我还有一个复选框用于每个项目。当我点击一个复选框时，应该显示带有 ng-show="IsVisible" 的 div，当我点击它回来（取消选中）时，它应该隐藏。我无法让它工作。
请在下面找到我的代码。
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="repeatController">
<table class="table table-hover table-striped table-condensed content-table">
<thead>
<tr>
<th class="centered table-th">Select</th>
<th class="sortable centered table-th">Name</th>
<th class="sortable centered table-th">Age</th>
<th class="sortable centered table-th">Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td class="centered">
<input ng-model="watchObj.visualSelect[$index]" type="checkbox" ng-click="select(item)" value="item" />
</td>
<td class="centered">{{item.name}}</td>
<td class="centered">{{item.age}}</td>
<td class="centered">{{item.gender}}</td>
</tr>
</tbody>
</table>
<div ng-show="IsVisible" class="col-md-12 table-fx-btn-container">
<button type="submit" ng-click="deleteName()" class="btn btn-default table-fx-btn">Delete Name</button>
<button type="submit" ng-click="addName()" class="btn btn-default table-fx-btn">Add Name</button>
</div>
</div>
</body>
</html>
这是我的控制器：
var app = angular.module('plunker', []);
app.controller('repeatController', function($scope) {
// $scope.watchObj.visualSelect = [];
// $scope.$watch('watchObj.visualSelect', function(newVal, OldVal, scope) {
// console.log("bcd", scope.watchObj.visualSelect);
// for ( var i = 0; i < $scope.watchObj.visualSelect.length; i++) {
// if ($scope.watchObj.visualSelect[i] === true) {
// $scope.IsVisible = newVal;
// }
// }
// });
$scope.items = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
];
});
这是我的 plunker link：Plunker Link
请指教
我对你的代码做了一些编辑，我想这就是你想要的，是吗？
var app = angular.module('plunker', []);
app.controller('repeatController', function($scope) {
$scope.selectedItem = null;
$scope.select = function(itemIndex){
if(itemIndex == $scope.selectedItem)
$scope.selectedItem = null;
else
$scope.selectedItem = itemIndex;
for(var i = 0; i < $scope.allItems.length; i++){
if(i == $scope.selectedItem)
$scope.allItems[i] = true;
else
$scope.allItems[i] = false;
}
}
$scope.items = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
];
$scope.allItems = [
false,
false,
false,
false,
false,
false,
false,
false,
false,
false
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="repeatController">
<table class="table table-hover table-striped table-condensed content-table">
<thead>
<tr>
<th class="centered table-th">Select</th>
<th class="sortable centered table-th">Name</th>
<th class="sortable centered table-th">Age</th>
<th class="sortable centered table-th">Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td class="centered">
<input ng-model="allItems[$index]" type="checkbox" ng-change="select($index)" value="item" />
</td>
<td class="centered">{{item.name}}</td>
<td class="centered">{{item.age}}</td>
<td class="centered">{{item.gender}}</td>
</tr>
</tbody>
</table>
<div ng-show="allItems[selectedItem]" class="col-md-12 table-fx-btn-container">
<button type="submit" ng-click="deleteName()" class="btn btn-default table-fx-btn">Delete Name</button>
<button type="submit" ng-click="addName()" class="btn btn-default table-fx-btn">Add Name</button>
</div>
</div>
</body>
</html>
我认为你把事情复杂化了。如果你只想在至少选择了一项时显示按钮，那么你可以这样做：
var app = angular.module('plunker', []);
app.controller('repeatController', function($scope) {
$scope.isVisible = false;
$scope.doItemChange = function(){
var selectedItem = $scope.items.find( function(item){
return item.isSelected;
});
$scope.isVisible = selectedItem!=null;
}
$scope.items = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="repeatController">
<table class="table table-hover table-striped table-condensed content-table">
<thead>
<tr>
<th class="centered table-th">Select</th>
<th class="sortable centered table-th">Name</th>
<th class="sortable centered table-th">Age</th>
<th class="sortable centered table-th">Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td class="centered">
<input ng-model="item.isSelected" type="checkbox" ng-change="doItemChange()"/>
</td>
<td class="centered">{{item.name}}</td>
<td class="centered">{{item.age}}</td>
<td class="centered">{{item.gender}}</td>
</tr>
</tbody>
</table>
<div ng-show="isVisible" class="col-md-12 table-fx-btn-container">
<button type="submit" ng-click="deleteName()" class="btn btn-default table-fx-btn">Delete Name</button>
<button type="submit" ng-click="addName()" class="btn btn-default table-fx-btn">Add Name</button>
</div>
</div>
</body>
</html>
我正在使用 ng-repeat 来获取项目列表。我还有一个复选框用于每个项目。当我点击一个复选框时，应该显示带有 ng-show="IsVisible" 的 div，当我点击它回来（取消选中）时，它应该隐藏。我无法让它工作。
请在下面找到我的代码。
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="repeatController">
<table class="table table-hover table-striped table-condensed content-table">
<thead>
<tr>
<th class="centered table-th">Select</th>
<th class="sortable centered table-th">Name</th>
<th class="sortable centered table-th">Age</th>
<th class="sortable centered table-th">Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td class="centered">
<input ng-model="watchObj.visualSelect[$index]" type="checkbox" ng-click="select(item)" value="item" />
</td>
<td class="centered">{{item.name}}</td>
<td class="centered">{{item.age}}</td>
<td class="centered">{{item.gender}}</td>
</tr>
</tbody>
</table>
<div ng-show="IsVisible" class="col-md-12 table-fx-btn-container">
<button type="submit" ng-click="deleteName()" class="btn btn-default table-fx-btn">Delete Name</button>
<button type="submit" ng-click="addName()" class="btn btn-default table-fx-btn">Add Name</button>
</div>
</div>
</body>
</html>
这是我的控制器：
var app = angular.module('plunker', []);
app.controller('repeatController', function($scope) {
// $scope.watchObj.visualSelect = [];
// $scope.$watch('watchObj.visualSelect', function(newVal, OldVal, scope) {
// console.log("bcd", scope.watchObj.visualSelect);
// for ( var i = 0; i < $scope.watchObj.visualSelect.length; i++) {
// if ($scope.watchObj.visualSelect[i] === true) {
// $scope.IsVisible = newVal;
// }
// }
// });
$scope.items = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
];
});
这是我的 plunker link：Plunker Link
请指教
我对你的代码做了一些编辑，我想这就是你想要的，是吗？
var app = angular.module('plunker', []);
app.controller('repeatController', function($scope) {
$scope.selectedItem = null;
$scope.select = function(itemIndex){
if(itemIndex == $scope.selectedItem)
$scope.selectedItem = null;
else
$scope.selectedItem = itemIndex;
for(var i = 0; i < $scope.allItems.length; i++){
if(i == $scope.selectedItem)
$scope.allItems[i] = true;
else
$scope.allItems[i] = false;
}
}
$scope.items = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
];
$scope.allItems = [
false,
false,
false,
false,
false,
false,
false,
false,
false,
false
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="repeatController">
<table class="table table-hover table-striped table-condensed content-table">
<thead>
<tr>
<th class="centered table-th">Select</th>
<th class="sortable centered table-th">Name</th>
<th class="sortable centered table-th">Age</th>
<th class="sortable centered table-th">Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td class="centered">
<input ng-model="allItems[$index]" type="checkbox" ng-change="select($index)" value="item" />
</td>
<td class="centered">{{item.name}}</td>
<td class="centered">{{item.age}}</td>
<td class="centered">{{item.gender}}</td>
</tr>
</tbody>
</table>
<div ng-show="allItems[selectedItem]" class="col-md-12 table-fx-btn-container">
<button type="submit" ng-click="deleteName()" class="btn btn-default table-fx-btn">Delete Name</button>
<button type="submit" ng-click="addName()" class="btn btn-default table-fx-btn">Add Name</button>
</div>
</div>
</body>
</html>
我认为你把事情复杂化了。如果你只想在至少选择了一项时显示按钮，那么你可以这样做：
var app = angular.module('plunker', []);
app.controller('repeatController', function($scope) {
$scope.isVisible = false;
$scope.doItemChange = function(){
var selectedItem = $scope.items.find( function(item){
return item.isSelected;
});
$scope.isVisible = selectedItem!=null;
}
$scope.items = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="repeatController">
<table class="table table-hover table-striped table-condensed content-table">
<thead>
<tr>
<th class="centered table-th">Select</th>
<th class="sortable centered table-th">Name</th>
<th class="sortable centered table-th">Age</th>
<th class="sortable centered table-th">Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td class="centered">
<input ng-model="item.isSelected" type="checkbox" ng-change="doItemChange()"/>
</td>
<td class="centered">{{item.name}}</td>
<td class="centered">{{item.age}}</td>
<td class="centered">{{item.gender}}</td>
</tr>
</tbody>
</table>
<div ng-show="isVisible" class="col-md-12 table-fx-btn-container">
<button type="submit" ng-click="deleteName()" class="btn btn-default table-fx-btn">Delete Name</button>
<button type="submit" ng-click="addName()" class="btn btn-default table-fx-btn">Add Name</button>
</div>
</div>
</body>
</html>