互斥单选按钮和相应的输入字段

时间:2016-05-18 09:26:59

标签: javascript html angularjs forms

您好我有以下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>
&#13;
&#13;
&#13;

我有3个单选按钮和相应的输入字段。可以一次选择一个无线电输入组合。无线电和输入字段都具有相同的ng模型,只是将单选按钮值显示在输入字段中(用户可以根据需要编辑输入字段)。但问题是当我选择单选按钮时,该值实际上被复制到输入字段,但是一旦用户单击另一个单选按钮就不会清除它。我该如何解决?任何想法的人?

2 个答案:

答案 0 :(得分:1)

您可以尝试以下代码:

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

制作一个控制器&#34; myCntrl&#34;如下:

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 = '';
                };
});

你完成了!!!

答案 1 :(得分:0)

刚做了一些修改

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