Javascript 在AngularJS中选择一个输入字段时，如何禁用一个输入字段？（均使用相同的ng型号）

嗨，我有两个输入字段。输入字段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> &nbsp;
                    </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">&nbsp;
                    </div>

                </td>
            </tr>
        </table>

BB

输入
输入*

这毫无意义

ng模型

是输入字段显示值的实时表示。至少对于文本输入，显示的文本始终等于其

ng model

值

我也很难弄清楚您的用例。当用户在输入字段中键入时，下拉列表会发生什么变化？

它没有意义

ng模型

是输入字段显示值的实时表示。至少对于文本输入，显示的文本始终等于其

ng model

值

---

我也很难弄清楚您的用例。当用户在输入字段中键入时，下拉列表会发生什么变化？

如何为选择的输入和输入字段创建两个不同的模型，并用nil初始化它们。因此，您可以：

<select ng-model='selectModel' ng-disabled='inputModel'>
...
</select>

<input type='text' ng-model='inputModel' ng-disabled='selectModel' />

更新： 如果要清除另一个字段：

$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> &nbsp;
                    </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">&nbsp;
                    </div>

                </td>
            </tr>
        </table>

---

如何为select input和input field创建两个不同的模型，并用nil初始化它们。因此，您可以：

<select ng-model='selectModel' ng-disabled='inputModel'>
...
</select>

<input type='text' ng-model='inputModel' ng-disabled='selectModel' />

更新： 如果要清除另一个字段：

$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> &nbsp;
                    </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">&nbsp;
                    </div>

                </td>
            </tr>
        </table>

---

然后它将调用ng模型并显示一个值列表。更新了我的问题你在找类似的东西吗？然后它将调用ng模型并显示一个值列表。更新了我的问题你在找类似的东西吗？Andrew，但那只会禁用，对吗？如果我想清理场地怎么办？@GentleJoseph我有最新的答案。肮脏的决定，但易于理解和改进但是Andrew，我需要对两个输入字段使用相同的ng模型。请看我的更新question@GentleJoseph我明白了，但在我对$scope.syncModel的回答中，您可以将最终的_data.mas模型设置为选定值。我的意思是，您的输入和选择有不同的模型，但在更改其中一个模型时，您将最终的_data.mas原始模型设置为选定的或输入的值Andrew，如果您不介意，请更新您的答案：）Andrew，但这只会禁用对吗？如果我想清理场地怎么办？@GentleJoseph我有最新的答案。肮脏的决定，但易于理解和改进但是Andrew，我需要对两个输入字段使用相同的ng模型。请看我的更新question@GentleJoseph我明白了，但在我对$scope.syncModel的回答中，您可以将最终的_data.mas模型设置为选定值。我的意思是，您的输入和选择有不同的模型，但在更改其中一个模型时，您将最终的\u data.mas原始模型设置为选定的或输入的值Andrew，如果您不介意，请更新您的答案：）