禁用时基于AngularJS模型的输入值为空答案

【问题标题】：AngularJS model based input value empty when disabled禁用时基于AngularJS模型的输入值为空
【发布时间】：2015-08-01 16:25:29
【问题描述】：

AngularJS 客户端应用程序。

我有一个带有两个文本输入和一个下拉列表框的表单。仅启用两个文本输入中的一个，列表框中的选定项确定启用哪个输入。

两个文本输入与模型中的字段相关联。但是，当禁用文本输入时，我希望清除该值，在禁用状态下不可见。再次启用输入时，应显示模型值。

使用 AngularJS 实现这一目标的最佳方法是什么？

【问题讨论】：

您可以在选择上使用ng-change 并检查选择的值是什么。写一个 if else 并将一个输入或另一个 ng-model 设置为空白然后禁用它

标签： javascript angularjs model

【解决方案1】：

Angular 表达式可以与 ngDisabled 指令一起使用。使用三元运算符检查所选值是否等于输入字段的名称并基于该设置 ngDisabled。如果表达式为真，则将在元素上设置 disabled 属性。

在你的 html 模板中有这样的东西。

ngDisabled = "($scope.input_model_variable_name !=    $scope.select_model_variable_name)?true:false"

【讨论】：

【解决方案2】：

一种方法是

在 ng-change on select 上调用函数。

-- 复制所有值以便稍后恢复

-- 空白除您要编辑的字段之外的所有文本字段

有一个ng-disable的功能

--禁用未选中的文本框

-- 启用其余的

var app = angular.module('testApp', []);
app.controller('MainCtrl', function ($scope) {

    var modelCopy = {
        inputTextField1: "",
        inputTextField2: ""
    };

    $scope.data = {
        inputTextField1: "",
        inputTextField2: "",
        selectedInputField: ""
    };

    $scope.inputFieldChanged = function () {

        angular.forEach(modelCopy, function (value, key) {
            modelCopy[key] = $scope.data[key];
            if (this.selectedInputField === key) {
                this[key] = value;
            } else {
                this[key] = "";
            }
        }, $scope.data);

    };

    $scope.toggleDisability = function (fieldToEnable) {
        if ($scope.data.selectedInputField === fieldToEnable) {
            return false;
        } else {
            return true;
        }
    };
});

HTML

<div ng-controller="MainCtrl">
    <div class="container">
        <form novalidate="novalidate" class="form-horizontal">
            <div class="form-group">
                <label for="selectInputFieldToEdit" class="control-label col-sm-2">Select Input Field to Edit</label>
                <div class="col-sm-6">
                    <select class="form-control" ng-change="inputFieldChanged()" id="selectInputFieldToEdit" ng-model="data.selectedInputField">
                        <option value="inputTextField1">Field 1</option>
                        <option value="inputTextField2">Field 2</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="inputTextField1" class="control-label col-sm-2">Input Text Field 1</label>
                <div class="col-sm-6">
                    <input id="inputTextField1" type="text" ng-model="data.inputTextField1" name="inputTextField1" class="form-control" ng-disabled="toggleDisability('inputTextField1')" />
                </div>
            </div>
            <div class="form-group">
                <label for="inputTextField2" class="control-label col-sm-2">Input Text Field 2</label>
                <div class="col-sm-6">
                    <input id="inputTextField2" type="text" ng-model="data.inputTextField2" name="inputTextField2" class="form-control" ng-disabled="toggleDisability('inputTextField2')" />
                </div>
            </div>
        </form>
    </div>
</div>

这是一个 jsFiddle https://jsfiddle.net/hheymu/jpydjuhp/

【讨论】：