Question

以下是我的情景。

我有2个名为A＆amp;的复选框B在ng-repeat元素内。这两个复选框的可能状态是


当A是真实时，B可以是真实的或虚假的

当A是假的时候，B永远不会真实。

下面是我使用ng-checked尝试的代码，但由于ng-checked不允许使用ng-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>

提前致谢。

Answer 1

以下是我对该问题的解决方案，该问题还修复了@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>

Answer 2

对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>

如何根据AngularJs中的另一个复选框状态选择复选框？

2 个答案: