我在大组中有多个级别的复选框。单击复选框的第一级时，将出现第二级；单击复选框的第二级时，将出现第三级。
当第一级复选框未被选中时，所有内部级别的复选框都应该被取消选中。
我使用了 ng-if 和 ng-init 来实现这一点。但这在保存数据时给我带来了问题。
我有大量的一级复选框，那么如何以简单的方式清除或取消选中所有内级复选框和单选框。
在ng-click上调用方法并一一清除模型将非常复杂。有什么简单的方法可以解决这个问题？
我的代码:-
<div ng-repeat="todo in todos" class="col-sm-12">
<div class="col-sm-12">
<input type="checkbox" ng-model="todo.level1" />
<label>Level 1</label>
</div>
<div class="col-sm-12" ng-if="todo.level1">
<div class="col-sm-12">
<div class="col-sm-offset-1 col-sm-11" ng-if="todo.level1">
<input type="checkbox" ng-model="todo.c4" ng-init="todo.c4 = false" />
<label> C4</label>
</div>
<div class="col-sm-12" ng-if="todo.c4">
<div class="col-sm-12" ng-if="todo.c4">
<div class="margin-left-2">
<input type="checkbox" ng-model="todo.c4vert" ng-init="todo.c4vert = false" />
<label> Xyz</label>
</div>
</div>
<div class="col-sm-12" ng-if="todo.c4vert">
<div class="margin-left-3">
<select id="Select3">
<option>Choose</option>
<option>25%</option>
<option>50%</option>
</select>
</div>
</div>
<div class="col-sm-12" ng-if="todo.c4">
<div class="margin-left-2">
<input type="checkbox" ng-model="todo.c4post" ng-init="todo.c4post = false" />
<label> ABC</label>
</div>
</div>
<div class="col-sm-12" ng-if="todo.c4post">
<div class="margin-left-3">
<label>Quest?</label><br />
<input type="radio" value="Yes" ng-model="todo.c4postdisloc" ng-init="todo.c4postdisloc = false" /><label> Yes</label>
<input type="radio" value="No" ng-model="todo.c4postdisloc" ng-init="todo.c4postdisloc = false" /><label> No</label>
</div>
</div>
<div class="col-sm-12" ng-if="todo.c4post">
<div class="margin-left-3">
<label>Quest 2?</label><br />
<input type="radio" value="Yes" ng-model="todo.c4postspinal" ng-init="todo.c4postspinal = false" /><label> Yes</label>
<input type="radio" value="No" ng-model="todo.c4postspinal" ng-init="todo.c4postspinal = false" /><label> No</label>
</div>
</div>
<div class="col-sm-12" ng-if="todo.c4">
<div class="margin-left-2">
<input type="checkbox" ng-model="todo.c4trans" ng-init="todo.c4trans = false" />
<label> LMN</label>
</div>
</div>
<div class="col-sm-12" ng-if="todo.c4trans">
<div class="margin-left-3">
<label>TYU </label>
<br />
<input type="radio" value="Yes" ng-model="todo.c4transdisplace" ng-init="todo.c4transdisplace = false" /><label> Yes</label>
<input type="radio" value="No" ng-model="todo.c4transdisplace" ng-init="todo.c4transdisplace = false" /><label> No</label>
</div>
</div>
</div>
</div>
</div>
</div>
使用ng-init给我带来了一个问题，因为复选框的值是从数据库加载的，ng-init使所有值false .
最佳答案
您应该将复选框绑定(bind)到包含 true 或 false 的模型。然后使用 ng-show 隐藏/显示层次结构。您可以使用递归函数来重置所有模型。
这是一个 fiddle :http://jsfiddle.net/93R8e/17/
标记:
<div ng-app="app" ng-controller="myCtrl">
<div ng-repeat="checkbox in checkboxes">
<div>
<input type="checkbox" ng-model="checkbox.checked" ng-change="actions.reset(checkbox)"/>
<span ng-bind="checkbox.name"></span>
</div>
<div style="margin-left: 20px;" ng-repeat="checkboxLevel2 in checkbox.values" ng-show="checkbox.checked">
<input type="checkbox" ng-model="checkboxLevel2.checked"/>
<span ng-bind="checkboxLevel2.name"></span>
</div>
</div>
</div>
JavaScript:
var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
$scope.checkboxes = [
{ name: 'checkbox 1', checked: true, values: [
{ name: 'checkbox 1 - 1', checked: true },
{ name: 'checkbox 1 - 2', checked: true }
]},
{ name: 'checkbox 2', checked: false, values: [] }
];
$scope.actions = {
reset: function (checkbox) {
if(!checkbox.hasOwnProperty('values') || checkbox.values.length === 0) {
return;
}
for(var i = 0; i < checkbox.values.length; i ++) {
checkbox.values[i].checked = false;
$scope.actions.reset(checkbox.values[i]);
}
}
};
});
希望这有帮助
关于javascript - AngularJS - 多级复选框问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24483363/