Search code examples
angularjstwitter-bootstrapradio-buttonangularjs-ng-repeatcollapsable

when the option button click textfield text should be erased not disable


I have this Plnkr. When the provided script option is enabled, the textbox in text should be erased.

  • Click Plus button in the Plnkr
  • Go to collapse panel inside radio button is there. Click provided script button.

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>

Solution

  • 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'" />