您好我有以下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>
&#13;
我有3个单选按钮和相应的输入字段。可以一次选择一个无线电输入组合。无线电和输入字段都具有相同的ng模型,只是将单选按钮值显示在输入字段中(用户可以根据需要编辑输入字段)。但问题是当我选择单选按钮时,该值实际上被复制到输入字段,但是一旦用户单击另一个单选按钮就不会清除它。我该如何解决?任何想法的人?
答案 0 :(得分: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>
制作一个控制器&#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> 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>