Как выбрать флажок на основе другого состояния флажка в AngularJs?

Ниже мой сценарий.

У меня есть 2 флажка с именами A и B, которые находятся внутри элемента ng-repeat. Возможные состояния этих двух флажков:

  1. Когда А истинно, В может быть либо истинным, либо ложным.
  2. Когда А ложно, Б никогда не может быть истинным.

Ниже приведен мой код, который я пробовал с 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>

Заранее спасибо.


angularjs angularjs-directive angularjs-ng-repeat angularjs-ng-checked
person Rog    schedule 09.09.2015    source источник
comment
Вы уверены, что ваш тег флажка <input> не обернут вокруг тега <div> в вашей директиве? В этом случае ng-checked может не работать.   -  person ccg    schedule 09.09.2015
comment
@ccg - отредактировал мой вопрос, чтобы включить шаблон из директивы   -  person Rog    schedule 09.09.2015

Ответы (2)


arrow_upward
3
arrow_downward

Ниже приведено мое решение проблемы, которое также исправляет сценарий, предложенный @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>
person Rog    schedule 11.09.2015

arrow_upward
1
arrow_downward

используйте ng-disabled для B:

<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>
person z0r0    schedule 09.09.2015
comment
Должно быть ng-disabled="!vehicle.modelA", верно? - person ccg; 09.09.2015