angularjs选择所有复选框功能
问题描述:
我是相当新的角度和有一个选择所有复选框,通过ng-model/ng-checked检查所有框。angularjs选择所有复选框功能
<th>
<input type="checkbox" id="selectAll" ng-model="selectAll"/>
</th>
<th>
${Case Number}
</th>
<tr ng-repeat="item in c.onbCase>
<td><input type="checkbox" name="checkbox" ng-click="checkboxFunc(item)"
ng-model="item.checked"
ng-checked="selectAll || item.checked"/>
</td>
<td>{{item.number}}</td>
</tr>
我也有一个名为checkboxFunc功能如被选中,并引发案件编号到一个数组,设置item.selected为true:
$scope.onbNum = [];
$scope.checkboxFunc = function(item){
if(item.selected == false) {
if($scope.onbNum.indexOf(item.number)==-1){
$scope.onbNum.push(
item.number
)
}
item.selected = true;
} else {
if($scope.onbNum.indexOf(item.number)!==-1){
var pos = $scope.onbNum.indexOf(item.number);
$scope.onbNum.splice(pos,1)
}
item.selected = false;
}
}
虽然选择点击时,所有的复选框,检查所有的箱子我该如何解决我的功能,以便所有的案件号码都被扔进阵列?
答
我不知道确切地知道你的问题,但我希望我的回答可以帮助您: 附加NG-点击你的全选输入如下图所示:
<input type="checkbox" id="selectAll" ng-model="selectAll" ng-change="checkAll()" />
,也低于函数添加到您控制器:
$scope.checkAll = function() {
if ($scope.selectAll == true) {
angular.forEach($scope.c.onbCase, function(item) {
if ($scope.onbNum.indexOf(item.number) == -1) {
$scope.onbNum.push(
item.number
);
}
});
} else {
angular.forEach($scope.c.onbCase, function (item) {
if ($scope.onbNum.indexOf(item.number) !== -1) {
var pos = $scope.onbNum.indexOf(item.number);
$scope.onbNum.splice(pos, 1);
}
});
}
}
答
如果您正在使用item.checked只是为了确保该复选框被选中,那么你可以做这样的事情:
$scope.onbCase = [
{ number:1, selected:false },
{ number:2, selected:false },
{ number:3, selected:false }
];
这是你的职责:
$scope.onbNum = [];
$scope.checkAll = function(){
$scope.onbNum = [];
for(var i=0; i<$scope.onbCase.length;i++){
$scope.onbCase[i].selected = $scope.selectAll;
}
if($scope.selectAll === true){
for(var i=0; i<$scope.onbCase.length;i++){
$scope.onbNum.push($scope.onbCase[i].number);
}
}
}
$scope.checkboxFunc = function(item){
if(item.selected) {
if($scope.onbNum.indexOf(item.number)===-1){
$scope.onbNum.push(
item.number
)
}
}
else {
var pos = $scope.onbNum.indexOf(item.number);
if(pos>-1){
$scope.onbNum.splice(pos,1);
}
$scope.selectAll = false;
}
}
这里是你的HTML页面:
<th>
<input type="checkbox" id="selectAll" ng-model="selectAll"
ng-click="checkAll()"/>
</th>
<th> ${Case Number}
</th>
<tr ng-repeat="item in onbCase">
<td><input type="checkbox" name="checkbox"
ng-click="checkboxFunc(item)" ng-model="item.selected"
ng-checked="selectAll || item.selected"/>
</td>
<td>{{item.number}}</td>
</tr>
希望这会工作,或者给你一个想法,你想要什么。
使用[NG-变化(https://docs.angularjs.org/api/ng/directive/ngChange)指令,而不是'NG-click'。它正确地通过[ngModelController](https://docs.angularjs.org/api/ng/type/ngModel.NgModelController)添加的点击处理程序进行管道处理。 – georgeawg