在AngularJS中选择一个输入字段时如何禁用一个输入字段? (都使用相同的 ng 模型)
Posted
技术标签:
【中文标题】在AngularJS中选择一个输入字段时如何禁用一个输入字段? (都使用相同的 ng 模型)【英文标题】:How to disable one input field when one is selected in AngularJS? (both using same ng-model) 【发布时间】:2016-01-29 04:54:25 【问题描述】:您好,我有两个输入字段。输入字段 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>
【问题讨论】:
【参考方案1】:如何为选择输入和输入字段创建 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;
【讨论】:
安德鲁,但这只会禁用对吗?如果我想清除字段怎么办? @GentleJoseph 我已经更新了答案。肮脏的决定,但易于理解和改进 但是安德鲁,我需要对两个输入字段使用相同的 ng-model。请查看我更新的问题 @GentleJoseph 我明白了,但是在我在 $scope.syncModel 中的回答中,您可以将 final_data.mas 模型设置为选定的值。我的意思是您的输入和选择具有不同的模型,但是在更改其中一个时,您将 final_data.mas 原始模型设置为选择或输入的值 安德鲁,如果您不介意,请更新您的答案:)【参考方案2】:这没有意义。
ng-model
是输入字段显示值的实时表示。至少对于文本输入,显示的文本始终等于其ng-model
值。
我也很难弄清楚你的用例。当用户在输入字段中输入时,下拉菜单会发生什么?
【讨论】:
然后它将调用 ng-model 并显示一个值列表。更新了我的问题 你在寻找类似typeahead的东西吗?以上是关于在AngularJS中选择一个输入字段时如何禁用一个输入字段? (都使用相同的 ng 模型)的主要内容,如果未能解决你的问题,请参考以下文章
加载时默认选中Angularjs复选框,并在选中时禁用选择列表
如何在AngularJS中使用pickaday指令禁用当前和未来日期
JQuery Mobile:单击文本字段时如何禁用默认键盘?