嗨,我有两个输入字段。输入字段A(下拉)和输入字段B。它们都发布相同的值(相同的ng-model)。我需要实现的是,当用户从下拉按钮中选择一个选项时,需要清除第二个输入字段。如何使用AngularJS做到这一点?是AngularJS的新手。提前致谢。
<table align="center">
<tr>
<td>
<div class="input-group">
<span class="input-group-addon"><b>BB</b></span>
<input class="form-control" type="input" ng-model="final_data.bb" readonly>
</div>
</td>
<p align="center" ng-show="processing['update_ms']" ng-class="processing['update_mst'].class" ng-cloak>
{{ processing['update_ms'].msg }}
</p>
<td>
<div class="input-group">
<span class="input-group-addon"><b>InputA</b></span>
<select class="form-control" ng-change="get_mass(); disableMass() " ng-model="final_data.mas" ng-options="m as m for m in maslist" required ng-cloak>
</select>
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon"><b>InputB*</b></span>
<input class="form-control" ng-disabled="isSelected" ng-model="final_data.mas" type="input">
</div>
</td>
</tr>
</table>
参考方案
如何为选择输入和输入字段创建2个不同的模型并通过nil对其进行初始化。所以你可以:
<select ng-model='selectModel' ng-disabled='inputModel'>
...
</select>
<input type='text' ng-model='inputModel' ng-disabled='selectModel' />
如果您需要通过更改选择和输入模型来更改原始模型,请执行以下操作:
html
<select ng-model='selectModel' ng-disabled='inputModel' ng-change=syncModel(selectModel)>
...
</select>
<input type='text' ng-model='inputModel' ng-disabled='selectModel' ng-change=syncModel(selectModel)/>
js
$scope.originalModel = null;
$scope.syncModel = function (value) {
$scope.originalModel = value;
}
更新:
如果要清除其他字段:
$scope.syncModel = function (value) {
$scope.originalModel = value;
//clearing
if (value == $scope.inputModel)
$scope.selectModel = null;
else
$scope.inputModel = null;
}
脏但容易
更新:
您的代码:
<table align="center">
<tr>
<td>
<div class="input-group">
<span class="input-group-addon"><b>BB</b></span>
<input class="form-control" type="input" ng-model="final_data.bb" readonly>
</div>
</td>
<p align="center" ng-show="processing['update_ms']" ng-class="processing['update_mst'].class" ng-cloak>
{{ processing['update_ms'].msg }}
</p>
<td>
<div class="input-group">
<span class="input-group-addon"><b>InputA</b></span>
<select class="form-control" ng-change="get_mass(); syncModels(selectModel) " ng-model="selectModel" ng-options="m as m for m in maslist" required ng-cloak ng-disabled="inputModel">
</select>
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon"><b>InputB*</b></span>
<input class="form-control" ng-disabled="selectModel" ng-model="inputModel" ng-change="syncModels(inputModel)" type="input">
</div>
</td>
</tr>
</table>
js
$scope.selectModel = null;
$scope.inputModel = null;
$scope.syncModels = function (value) {
$scope.final_data.mas = value;
//clearing
if (value == $scope.inputModel)
$scope.selectModel = null;
else
$scope.inputModel = null;
}
Telerik单选按钮所需的字段验证器 - javascript如何设置Telerik单选按钮所需的字段验证器?我想在按钮单击“ BtnSave”上设置必填字段验证器吗?请帮忙!<telerik:RadButton ID="radio_male" runat="server" ToggleType="Radio" AutoPostBack="fa…
在PHP文件中调用javascript函数并在加载HTML文件之后? - javascript我需要在我的php中调用js函数,但无法正常工作。有人可以告诉我我在做什么错吗?我该如何轻松地做到这一点?谢谢!我有三个文件: mail.php负责发送$ _POST的内容(工作正常)。我调用我的javascript函数来切换模式,具体取决于邮件是否已发送。 <? ... $response = $sendgrid->send($email);…
在提交时在表单操作中获取变量丢失 - javascript当表单由onchange事件提交时,它不会保留get变量view。任何想法为什么会发生这种情况?提交后,这是它进入的网址,index?month=February&year=2014<form action="index?view=list" class="pure-form pure-fo…
选择后显示输入元素 - javascript我有一个表格,其中取决于用户的选择,输入元素是否可见。实际上,用户正在以另一种形式设置已定义的合作伙伴类型,并且如果选中该元素,则允许在该类型的合作伙伴上可见的元素类型1将显示以下元素:<input type="text" id="partner" name="partner" class=&…
Ajax表单未获得结果 - javascript我有一个带有搜索功能的主页。从主页搜索可以正常工作,但是当我尝试使用ajax表单(在url.com/search?id=biology上)再次搜索时,我被重定向到404页面,提示未找到/Search。主页上的表格:@using (Html.BeginForm("Index", "Search", new { Retur…