angularjsangularjs-directiveangularjs-ng-repeatangularjs-ng-checked

How to select checkbox based on another checkbox state in AngularJs?


Below is my scenario.

I have 2 checkboxes named A & B which are inside the ng-repeat element. The possible states of these 2 checkboxes are

  1. When A is truthy, B can be either truthy or falsey
  2. When A is falsey, B can never be truthy.

Below is my code which I tried with ng-checked, but as ng-checked doesn't allow ng-model along with it, I couldn't come up with a solution.

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>

Above code uses a directive v-check which is nothing but a checkbox.

EDIT: The template of my v-check directive: <label class='checkbox-inline'><input ng-model='ngModel' type='checkbox'>{{text}}</label>

Thanks in advance.


Solution

  • Below is my solution to the problem, which also fixes the scenario as suggested by @entre in his comment.

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