【问题标题】：Mutually exclusive radio button and corresponding input field互斥单选按钮和对应的输入框
【发布时间】：2016-05-18 09:26:58
【问题描述】：
您好，我有以下 html：
<td>
<div class="input-group" ng-cloak>
<table>
<tr>
<td> 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> 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 个单选按钮和相应的输入字段。一次可以选择任一无线电输入组合。单选和输入字段具有相同的 ng-model，只是为了将单选按钮的值显示到输入字段中（用户可以根据需要编辑输入字段）。但问题是当我选择单选按钮时，该值实际上被复制到输入字段，但是一旦用户单击另一个单选按钮，它就不会被清除。我该如何解决？有什么想法吗？
【问题讨论】：
标签：
javascript
html
angularjs
forms
【解决方案1】：
你可以试试下面的代码：
<div ng-controller="myCntrl">
<table>
<tr>
<td> 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> 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>
如下制作一个控制器“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 = '';
};
});
你已经完成了！！！
【解决方案2】：
刚刚做了一些修改
<table ng-init="super.comp='Component'; super.sub_sys='Sub-system/Product/Process';super.sys='System/Product/Process'">
<tr>
<td> 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> 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>