Question

AngularJS客户端应用程序。

我有一个包含两个文本输入和一个下拉列表框的表单。只启用了两个文本输入中的一个，列表框中的选定项目确定启用了哪个输入。

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

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

Answer 1

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

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

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

Answer 2

一种方法是

在选择时调用ng-change上的函数。

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

- 删除除要编辑的字段之外的所有文本字段

具有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/

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

2 个答案: