在AngularJS中选择一个输入字段时,如何禁用该字段?(均使用相同的ng模型)
How to disable one input field when one is selected in AngularJS? (both using same ng-model)
嗨,我有两个输入字段。输入字段A(下拉列表)和输入字段B。这两个字段都发布了相同的值(相同的ng模型)。我需要实现的是,当用户从下拉按钮中选择一个选项时,需要清除第二个输入字段。我如何使用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>
如何为select input和input字段创建两个不同的模型,并用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;
}
这没有意义。
ng-model
是输入字段显示值的实时表示。至少对于文本输入,显示的文本始终等于其ng-model
值。
我也很难弄清楚你的用例。当用户键入输入字段时,下拉列表会发生什么情况?
相关文章:
- 如何创建具有默认值的JavaScript对象字段?(AngularJS模型相关)
- 即使 ng 模型有值,也使输入字段为空
- FilterHeader不适用于模型字段类型对象
- 对“类型”和“状态”字段的更新会中断WSAPI中的模型检索
- 从包含ng的字段中获取表单数据,而无需使用ng模型
- 使用setter而不是模型字段进行角度x可编辑
- Ng模型重写我在AngularJS的输入字段中输入的任何值
- 如何忽略ExtJS数据模型中的空字段
- 如何将base64写入模型's文件字段
- 如何使用递增的 ng 模型动态创建多个表单输入字段
- 从页面上的字段加载 JavaScript 模型
- 环回:如何限制对模型某些字段的访问
- Yii2:重复相关模型中的字段
- 如何计算具有动态ng模型名称的字段
- 角度形式 - 从包装器中的字段获取模型
- 使用相关模型字段的环回筛选器
- 将内容可编辑字段序列化为 JSON 对象以保存到模型的最佳方法是什么?
- Django Forms - 构建一个表单,显示来自几个不同模型的字段,但按外键排序
- 余烬模型字段中的车把代码.如何评估
- 如何隐藏/显示基于先前填充字段(模型值)的条件的角向导步骤