I have this Plnkr. When the provided script option is enabled, the textbox in text should be erased.
Relevant code:
<table class="range-table" width="100%">
<tr>
<tr ng-repeat="contact in contacts track by $index">
<td>
<accordion>
<accordion-group is-open="status.open" ng-repeat="group in groups">
<accordion-heading>
<span ng-click="opened(group, $index)">{{group.title}}{{contact}}</span><i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
<div> {{group.content}}
<label>
<input type="radio" ng-model="form.Program" value="custom" required /> Customize</label>
<label>
<input type="radio" ng-model="form.Program " value="other" required ng-click="form.OtherProgram = null" /> Provide Script</label>
<input type="text" ng-model="form.OtherProgram" ng-disabled="form.Program != 'other'" name="Program_Other" ng-required="form.Program != 'other'" />
</div>
</accordion-group>
</accordion>
</td>
</tr>
</table>
Just use a ng-click
to change the ng-model
text input to null
:
<input type="radio" ng-model="form.Program " value="other" required ng-click="form.OtherProgram = null" />
EDIT:
If I understood here is an updated answer, use a custom variable disableOption
set to false initially, then play with that with ng-click
and you are done:
<label ng-init="disableOption = false">
<input type="radio" ng-model="form.Program" value="custom" ng-click="disableOption = true" required /> Customize
</label>
<label>
<input type="radio" ng-model="form.Program " value="other" ng-click="disableOption = false" required /> Provide Script
</label>
<input type="text" ng-model="form.OtherProgram" ng-disabled="disableOption === true" name="Program_Other" ng-required="form.Program != 'other'" />