如何根据 AngularJs 中的另一个复选框状态 select 复选框?
How to select checkbox based on another checkbox state in AngularJs?
下面是我的场景。
I have 2 checkboxes named A & B which are inside the ng-repeat element. The possible states of these 2 checkboxes are
- When A is truthy, B can be either truthy or falsey
- When A is falsey, B can never be truthy.
下面是我尝试使用 ng-checked 的代码,但是由于 ng-checked 不允许 ng-model 一起使用,所以我想不出一个解决方案。
NOTE: I need to capture both these 2 checkboxes state in my Model
<tbody>
<tr ng-repeat="vehicle in editor.vehicles">
<td>
<v-check name="A" ng-model="vehicle.modelA"></v-check>
</td>
<td>
<v-check name="B" ng-model="vehicle.modelB" ng-checked="vehicle.modelA"></v-check>
</td>
</tr>
</tbody>
以上代码使用了一个指令 v-check
,它只是一个复选框。
编辑:
我的 v-check
指令的模板:
<label class='checkbox-inline'><input ng-model='ngModel' type='checkbox'>{{text}}</label>
提前致谢。
对 B 使用 ng-disabled:
<tbody>
<tr ng-repeat="vehicle in editor.vehicles">
<td>
<v-check name="A" ng-model="vehicle.modelA"></v-check>
</td>
<td>
<v-check name="B" ng-model="vehicle.modelB" ng-disabled="!vehicle.modelA"></v-check>
</td>
</tr>
</tbody>
我已经测试过这段代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example54-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
<label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>
<input type="checkbox" ng-model="button" ng-disabled="checked">
</body>
</html>
下面是我对问题的解决方案,它也修复了@entre 在他的评论中建议的场景。
<tbody>
<tr ng-repeat="vehicle in editor.vehicles">
<td>
<v-check name="A" ng-model="vehicle.modelA" ng-click="vehicle.modelB=false"></v-check>
</td>
<td>
<v-check name="B" ng-model="vehicle.modelB" ng-disabled="!vehicle.modelA"></v-check>
</td>
</tr>
</tbody>
下面是我的场景。
I have 2 checkboxes named A & B which are inside the ng-repeat element. The possible states of these 2 checkboxes are
- When A is truthy, B can be either truthy or falsey
- When A is falsey, B can never be truthy.
下面是我尝试使用 ng-checked 的代码,但是由于 ng-checked 不允许 ng-model 一起使用,所以我想不出一个解决方案。
NOTE: I need to capture both these 2 checkboxes state in my Model
<tbody>
<tr ng-repeat="vehicle in editor.vehicles">
<td>
<v-check name="A" ng-model="vehicle.modelA"></v-check>
</td>
<td>
<v-check name="B" ng-model="vehicle.modelB" ng-checked="vehicle.modelA"></v-check>
</td>
</tr>
</tbody>
以上代码使用了一个指令 v-check
,它只是一个复选框。
编辑:
我的 v-check
指令的模板:
<label class='checkbox-inline'><input ng-model='ngModel' type='checkbox'>{{text}}</label>
提前致谢。
对 B 使用 ng-disabled:
<tbody>
<tr ng-repeat="vehicle in editor.vehicles">
<td>
<v-check name="A" ng-model="vehicle.modelA"></v-check>
</td>
<td>
<v-check name="B" ng-model="vehicle.modelB" ng-disabled="!vehicle.modelA"></v-check>
</td>
</tr>
</tbody>
我已经测试过这段代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example54-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
<label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>
<input type="checkbox" ng-model="button" ng-disabled="checked">
</body>
</html>
下面是我对问题的解决方案,它也修复了@entre 在他的评论中建议的场景。
<tbody>
<tr ng-repeat="vehicle in editor.vehicles">
<td>
<v-check name="A" ng-model="vehicle.modelA" ng-click="vehicle.modelB=false"></v-check>
</td>
<td>
<v-check name="B" ng-model="vehicle.modelB" ng-disabled="!vehicle.modelA"></v-check>
</td>
</tr>
</tbody>