Angularjs ng重复复选框单击不切换div可见性
我正在使用ng repeat创建项目列表。每个项目我都有一个复选框。当我点击一个复选框时，应该显示一个带有ng show=“IsVisible”的div，当我点击它返回（取消选中）时，它应该隐藏。我不能让它工作 请在下面找到我的代码Angularjs ng重复复选框单击不切换div可见性,angularjs,angularjs-ng-repeat,angularjs-ng-show,Angularjs,Angularjs Ng Repeat,Angularjs Ng Show,我正在使用ng repeat创建项目列表。每个项目我都有一个复选框。当我点击一个复选框时，应该显示一个带有ng show=“IsVisible”的div，当我点击它返回（取消选中）时，它应该隐藏。我不能让它工作 请在下面找到我的代码 <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker&l
<!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>
安古拉斯普朗克
文件。写（“”）；
挑选
名称
年龄
性别
{{item.name}
{{item.age}
{{item.gender}
删除名称
添加名称
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'}
];
});
var-app=angular.module（'plunker'，[]）；
应用控制器（'repeatController'，函数（$scope）{
//$scope.watchObj.visualSelect=[]；
//$scope.$watch（'watchObj.visualSelect'，函数（newVal、OldVal、scope）{
//console.log（“bcd”，scope.watchObj.visualSelect）；
//对于（变量i=0；i<$scope.watchObj.visualSelect.length；i++）{
//if（$scope.watchObj.visualSelect[i]==true）{
//$scope.IsVisible=newVal；
// }
// }
// });
$scope.items=[
{姓名：'John'，年龄：25岁，性别：'boy'}，
{姓名：'Jessie'，年龄：30岁，性别：'girl'}，
{姓名：'Johanna'，年龄：28岁，性别：'girl'}，
{姓名：'Joy'，年龄：15岁，性别：'girl'}，
{姓名：'Mary'，年龄：28岁，性别：'girl'}，
{姓名：'Peter'，年龄：95岁，性别：'boy'}，
{姓名：'Sebastian'，年龄：50岁，性别：'boy'}，
{姓名：'Erika'，年龄：27岁，性别：'girl'}，
{姓名：'Patrick'，年龄：40岁，性别：'boy'}，
{姓名：'Samantha'，年龄：60岁，性别：'girl'}
];
});
请给出建议。我已经编辑了一点您的代码，我想这就是您想要的，是吗
var-app=angular.module（'plunker'，[]）；
应用控制器（'repeatController'，函数（$scope）{
$scope.selectedItem=null；
$scope.select=函数（itemIndex）{
if（itemIndex=$scope.selectedItem）
$scope.selectedItem=null；
其他的
$scope.selectedItem=itemIndex；
对于（变量i=0；i<$scope.allItems.length；i++）{
如果（i=$scope.selectedItem）
$scope.allItems[i]=true；
其他的
$scope.allItems[i]=假；
}
}
$scope.items=[
{姓名：'John'，年龄：25岁，性别：'boy'}，
{姓名：'Jessie'，年龄：30岁，性别：'girl'}，
{姓名：'Johanna'，年龄：28岁，性别：'girl'}，
{姓名：'Joy'，年龄：15岁，性别：'girl'}，
{姓名：'Mary'，年龄：28岁，性别：'girl'}，
{姓名：'Peter'，年龄：95岁，性别：'boy'}，
{姓名：'Sebastian'，年龄：50岁，性别：'boy'}，
{姓名：'Erika'，年龄：27岁，性别：'girl'}，
{姓名：'Patrick'，年龄：40岁，性别：'boy'}，
{姓名：'Samantha'，年龄：60岁，性别：'girl'}
];
$scope.allItems=[
假,，
假,，
假,，
假,，
假,，
假,，
假,，
假,，
假,，
假的
];
});
安古拉斯普朗克
文件。写（“”）；
挑选
名称
年龄
性别
{{item.name}
{{item.age}
{{item.gender}
删除名称
添加名称
我已经编辑了一点您的代码，我想这就是您想要的，是吗
var-app=angular.module（'plunker'，[]）；
应用控制器（'repeatController'，函数（$scope）{
$scope.selectedItem=null；
$scope.select=函数（itemIndex）{
if（itemIndex=$scope.selectedItem）
$scope.selectedItem=null；
其他的
$scope.selectedItem=itemIndex；
对于（变量i=0；i<$scope.allItems.length；i++）{
如果（i=$scope.selectedItem）
$scope.allItems[i]=true；
其他的
$scope.allItems[i]=假；
}
}
$scope.items=[
{姓名：'John'，年龄：25岁，性别：'boy'}，
{姓名：'Jessie'，年龄：30岁，性别：'girl'}，
{姓名：'Johanna'，年龄：28岁，性别：'girl'}，
{姓名：'Joy'，年龄：15岁，性别：'girl'}，
{姓名：'Mary'，年龄：28岁，性别：'girl'}，
{姓名：'Peter'，年龄：95岁，性别：'boy'}，
{姓名：'Sebastian'，年龄：50岁，性别：'boy'}，
{姓名：'Erika'，年龄：27岁，性别：'girl'}，
{姓名：'Patrick'，年龄：40岁，性别：'boy'}，
{姓名：'Samantha'，年龄：60岁，性别：'girl'}
];
$scope.allItems=[
假,，
假,，
假,，
假,，
假,，
假,，
假,，
假,，
假,，
假的
];
});
安古拉斯普朗克
文件。写（“”）；
挑选
名称
年龄
性别
{{item.name}
{{item.age}
{{item.gender}
删除名称
添加名称
我认为你把事情复杂化了。如果希望仅在至少选择了一个项目时显示按钮，则可以执行以下操作：
var-app=angular.module（'plunker'，[]）；
应用控制器（'repeatController'，函数（$scope）{
$scope.isVisible=false；
$scope.doItemChange=函数（）{
var selectedItem=$scope.items.find（函数（项）{
返回项。已选择；
});
$scope.isVisible=selectedItem！=null；
}
$scope.items=[
{姓名：'John'，年龄：25岁，性别：'boy'}，
{姓名：'Jessie'，年龄：30岁，性别：'girl'}，
{姓名：'Johanna'，年龄：28岁，性别：'girl'}，
{姓名：'Joy'，年龄：15岁，性别：'girl'}，
{姓名：'Mary'，年龄：28岁，性别：'girl'}，
{姓名：'Peter'，年龄：95岁，性别：'boy'}，
{姓名：'Sebastian'，年龄：50岁，性别：'boy'}，
{姓名：'Erika'，年龄：27岁，性别：'girl'}，
{姓名：'Patrick'，年龄：40岁，性别：'boy'}，
{姓名：'Samantha'，年龄：60岁，性别：'girl'}
];
});
安古拉斯普朗克
文件。写（“”）；
挑选
名称
年龄
性别