CODEWITHSUNDEEP
javascripthtmlangularjsforms
vellattukudy
vellattukudy

Reputation: 789

Mutually exclusive radio button and corresponding input field

Hi I have the following html:

<td>
  <div class="input-group" ng-cloak>
    <table>
      <tr>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sys/Prod/Proc :</td>
        <td width="10px"></td>
        <td>
          <input type="radio" name="radio" ng-model="sys" value="System/Product/Process" />
        </td>
        <td width="10px"></td>
        <td>
          <input type="text" ng-model="sys" class="form-control" />
        </td>
      </tr>
      <tr height="10px"></tr>
      <tr>
        <td>Sub-Sys/Prod/Proc :</td>
        <td width="10px"></td>
        <td>
          <input type="radio" ng-model="sub_sys" name="radio" value="Sub-system/Product/Process" />
        </td>
        <td width="10px"></td>
        <td>
          <input type="text" ng-model="sub_sys" class="form-control" />
        </td>
      </tr>
      <tr height="10px"></tr>
      <tr>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Component :</td>
        <td width="10px"></td>
        <td>
          <input type="radio" ng-model="comp" name="radio" value="Component" />
        </td>
        <td width="10px"></td>
        <td>
          <input type="text" ng-model="comp" class="form-control" />
        </td>
      </tr>
    </table>
  </div>
</td>

I have 3 radio buttons and corresponding input fields. Either one of the radio-input combination can be selected at a time. Both radio and input field have the same ng-model, just to display the radio button value into input field (User can edit the input field if he want to). But the problem is when i select the radio button, the value is actually copied over to the input field, but its not clearing once the user clicks the other radio button. How can I fix it? Any idea guys?

Upvotes: 0

Views: 939

Answers (2)

Nagender Rawat
Nagender Rawat

Reputation: 141

Just made some ammendments

<table ng-init="super.comp='Component'; super.sub_sys='Sub-system/Product/Process';super.sys='System/Product/Process'">
<tr>
  <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sys/Prod/Proc :</td>
  <td width="10px"></td>
  <td>
    <input type="radio" name="radio" ng-click='selected=super.sys' ng-model="super.sys" value="{{super.sys}}" />
  </td>
  <td width="10px"></td>
  <td>
    <input type="text" ng-change="selected=super.sys" ng-show="selected==super.sys"  ng-model="super.sys" class="form-control" />
    <input type="text" ng-show="selected!==super.sys" readonly="readonly" class="form-control" />
  </td>
</tr>
<tr height="10px"></tr>
<tr>
  <td>Sub-Sys/Prod/Proc :</td>
  <td width="10px"></td>
  <td>
    <input type="radio" ng-model="super.sub_sys" ng-click="selected=super.sub_sys" name="radio" value="{{super.sub_sys}}" />
  </td>
  <td width="10px"></td>
  <td>
    <input type="text" ng-show="selected==super.sub_sys" ng-change="selected=super.sub_sys" ng-model="super.sub_sys" class="form-control" />
    <input type="text" ng-show="selected!==super.sub_sys" readonly="readonly" class="form-control" />
  </td>
</tr>
<tr height="10px"></tr>
<tr>           
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Component :</td>
  <td width="10px"></td>
  <td>
    <input type="radio" ng-model="super.comp" ng-click='selected= super.comp' name="radio" value="{{super.comp}}" />
  </td>
  <td width="10px"></td>
  <td>
    <input type="text" ng-show="selected==super.comp" ng-change="selected=super.comp" ng-model="super.comp" class="form-control" />
    <input type="text" ng-show="selected!==super.comp" readonly="readonly" class="form-control" />
  </td>
</tr>
</table>

Upvotes: 0

Suneet Bansal
Suneet Bansal

Reputation: 2702

You can try below code:

    <div ng-controller="myCntrl">
     <table>
     <tr>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sys/Prod/Proc :</td>
                    <td width="10px"></td>
                    <td>
                      <input type="radio" name="radio" ng-model="sys" value="System/Product/Process" ng-click="sysRadioClick();"/>
                    </td>
                    <td width="10px"></td>
                    <td>
                      <input type="text" ng-model="sys" class="form-control" />
                    </td>
                  </tr>
                  <tr height="10px"></tr>
                  <tr>
                    <td>Sub-Sys/Prod/Proc :</td>
                    <td width="10px"></td>
                    <td>
                      <input type="radio" ng-model="sub_sys" name="radio" value="Sub-system/Product/Process" ng-click="subSysRadioClick();"/>
                    </td>
                    <td width="10px"></td>
                    <td>
                      <input type="text" ng-model="sub_sys" class="form-control" />
                    </td>
                  </tr>
                  <tr height="10px"></tr>
                  <tr>
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Component :</td>
                    <td width="10px"></td>
                    <td>
                      <input type="radio" ng-model="comp" name="radio" value="Component" ng-click="compRadioClick();" />
                    </td>
                    <td width="10px"></td>
                    <td>
                      <input type="text" ng-model="comp" class="form-control" />
                    </td>
                  </tr>
                </table>
              </div>
            </td>
</tr>
</table>
</div>

Make one controller "myCntrl" as below:

app.controller('myCntrl', function($scope){
   $scope.sysRadioClick = function() {
                    $scope.sub_sys = '';
                    $scope.comp = '';
                };

                $scope.subSysRadioClick = function() {
                    $scope.sys = '';
                    $scope.comp = '';
                };


                $scope.compRadioClick = function() {
                    $scope.sub_sys = '';
                    $scope.sys = '';
                };
});

And you are done!!!

Upvotes: 1

Related Questions