javascript - Angularjs Make drop down disabled when pressing checkbox inside ng-repeat - Stack Overflow

• I'm trying to display on screen html controls using Meta-Data stored in json file.
• Also I'm trying to create a state where pressing check box that will make a drop down disabled.
  • I was managed to achieve this for a select box with static options and a select box with dynamic options (using ng-options).
  • I could not achieve this when wrapping it with ng-repeat.

I have spent a lot of time making this work but in vane.

I would appreciate if someone could pin point me to the right direction.

I have created a sample code which can be found in Plunker here

• I'm trying to display on screen html controls using Meta-Data stored in json file.
• Also I'm trying to create a state where pressing check box that will make a drop down disabled.
  • I was managed to achieve this for a select box with static options and a select box with dynamic options (using ng-options).
  • I could not achieve this when wrapping it with ng-repeat.

I have spent a lot of time making this work but in vane.

I would appreciate if someone could pin point me to the right direction.

I have created a sample code which can be found in Plunker here

• javascript
• angularjs
• angularjs-ng-repeat
• ng-show

Share Improve this question Follow asked Aug 7, 2013 at 5:16 ScriptionScription 64533 gold badges1212 silver badges2121 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

From ngRepeat doc:

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope

The trick is to add controlChecked to form and remove the ng-init. So they will be in the same scope.

<div ng-show="control.type == 'Checkbox'">
    <input type="checkbox" ng-model="form.controlChecked" name="{{control.id}}"/>
</div>

<div ng-show="control.type == 'DropdownList'">
     <select    ng-model="control.id" 
                ng-disabled="!form.controlChecked"
                ng-options="value.code as value.name for value in control.items" 
                name="{{control.id}}"
                >
    </select>

Demo

from http://docs.angularjs/api/ng.directive:ngRepeat:

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope.

so it looks like you should use the $parent scope: $parent.controlChecked.