我最近一直在使用 Angular.js,并决定在选中父复选框后检查所有复选框,我已经使用了ng-model
and ng-checked
指令。
<div ng-app>
<div ng-controller="Ctrl">
<input type="checkbox" ng-model="parent"/> Select All<br/>
<input type="checkbox" ng-model="child_1" ng-checked="parent" ng-click="getAllSelected()"/> First<br/>
<input type="checkbox" ng-model="child_2" ng-checked="parent" ng-click="getAllSelected()"/> Second<br/>
<input type="checkbox" ng-model="child_3" ng-checked="parent" ng-click="getAllSelected()"/> Three<br/>
<input type="checkbox" ng-model="child_4" ng-checked="parent" ng-click="getAllSelected()"/> Four<br/>
<input type="checkbox" ng-model="child_5" ng-checked="parent" ng-click="getAllSelected()"/> Five<br/>
</div>
</div>
现在,我尝试在选中所有子复选框后选择所有父复选框,但遇到一些问题。
function Ctrl($scope) {
$scope.getAllSelected = function () {
var chkChild = document.querySelectorAll('input[ng-model^="child_"]').length;
var chkChildChecked = document.querySelectorAll('input[ng-model^="child_"]:checked').length;
if (chkChild === chkChildChecked) $scope.parent= true;
else $scope.parent= false;
}
}
Demo: http://jsfiddle.net/codef0rmer/QekpX/ http://jsfiddle.net/codef0rmer/QekpX/
我们可以让上面的代码更加健壮吗?
复选框中的 ng-checked 属性接受一个表达式。因此,您可以给出带有和/或条件的表达式,如下所述,以使其根据表达式进行检查。
<input type="checkbox" ng-checked="child_1 && child_2 && child_3 && child_4 && child_5" ng-model="parent"/> Select All<br/>
单击每个子复选框时,您不必编写单独的函数来进行计算。
这是 jsfiddle 中的示例 http://jsfiddle.net/pio123/624y6/1/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)