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

Question

嗨，我有以下 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>

我有 3 个单选按钮和相应的输入字段。一次可以选择任一 radio 输入组合。单选按钮和输入字段都有相同的 ng-model，只是将单选按钮值显示到输入字段中(用户可以根据需要编辑输入字段)。但问题是，当我选择单选按钮时，该值实际上被复制到输入字段，但一旦用户单击另一个单选按钮，它就不会清除。我该如何修复它？大家有什么想法吗？

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

制作一个 Controller “myCntrl”，如下所示:

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

你就完成了!!!