我正在尝试将选中的复选框数据保存到一个数组中,当选中一个复选框时,我能够将数据推送到数组中,但是当我选中“ checkAll”复选框时,如果选中了所有复选框,则不会选中所有复选框复选框,然后取消选中checkAll复选框,都不会取消选中所有复选框。
我曾经尝试使用javascript来达到预期的效果,但是我试图在angularjs中做到这一点,但未能实现。
HTML:
<div ng-if="RosList!= null">
<table align='center' width='80%' >
<tr class='trdesign'>
<td>
<input type="hidden" id="RosList" data-ng-model="RosList" name="RosList" value="{{RosList}}">
<input type="checkbox" id="all" data-ng-model="checkedAll" ng-change="toggleCheckAll()" />
</td>
<td> Sl No</td>
<td> RO No.</td>
</tr>
<tr ng-repeat="user in RosList" >
<td>
<input type="checkbox" value="{{user.do_ro_no}}" data-ng-
model="user.checked" ng-change="modifyArrayToPost(user)"/>
</td>
<td>{{user.slno}}</td>
<td>{{user.do_ro_no}} </td>
</tr>
</table>
<tt>array: {{arrayToPost}}</tt>
</div>
Angularjs:
$scope.arrayToPost = [];
$scope.toggleCheckAll = function() {
if($scope.checkedAll) {
angular.forEach($scope.RosList, function(user) {
user.checked = true;
$scope.modifyArrayToPost(user);
});
}
else {
angular.forEach($scope.RosList, function(user) {
user.checked = false;
$scope.modifyArrayToPost(user);
});
}
}
$scope.modifyArrayToPost = function(user) {
if(user.checked && $scope.arrayToPost.indexOf(user.do_ro_no) == -1){
$scope.arrayToPost.push(user.do_ro_no);
}
else if(!user.checked) {
$scope.arrayToPost.splice($scope.arrayToPost.indexOf(user.do_ro_no), 1);
}
}
$scope.$watch('RosList', function() {
var allSet = true;
var allClear = true;
angular.forEach($scope.RosList, function(user) {
if (user.checked) {
allClear = false;
} else {
allSet = false;
}
});
var checkAll = $element.find('#all');
checkAll.prop('indeterminate', false);
if (allSet) {
$scope.checkedAll = true;
} else if (allClear) {
$scope.checkedAll = false;
} else {
$scope.checkedAll = false;
checkAll.prop('indeterminate', true);
}
}, true);