ng-change循环事件互相调用下拉列表

时间:2021-06-21 19:18:25

I have a very interesting problem. Have 2 drop-downs, with options 0 = Exclude, 1 = Include, 3 = Only When user want to select 3 from these 2 list, the other one should be changed to 0-Exclude. But when I try this code, its calling each other and in result the selected (3-Only) dropdown shows 0-Exclude and other 3-Only which is reverse.

我有一个非常有趣的问题。有2个下拉菜单,选项0 =排除,1 =包括,3 =仅当用户想要从这2个列表中选择3时,另一个应该更改为0-Exclude。但是当我尝试这个代码时,它会相互调用,结果选中的(仅限3个)下拉列表显示0-Exclude和其他3-Only,这是相反的。

Here is the code

这是代码

Controller.js

$scope.lockedChanged = function() {
    if ($scope.data.lockedGldata == 2) {
        $scope.data.deactivatedGldata = 0;
    }
};

$scope.deactivatedChanged = function () {
    if ($scope.data.deactivatedGldata == 2) {
        $scope.data.lockedGldata = 0;
    }
};

View.html

    <div class="form-group">
        <label for="lockedGlOption" class="col-sm-3 control-label">Locked G/L:</label>
        <div class="col-sm-3">
            <select class="form-control" required ng-init="data.deactivatedGldata = 0"
                    id="lockedGlOption"
                    ng-model="data.deactivatedGldata"
                    ng-options="o.id as o.text for o in lockedGlOptions"
                    ng-change="lockedChanged()">
                <option value="" disabled>Select an option...</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="DeactivatedGlOption" class="col-sm-3 control-label">Deactivated G/L:</label>
        <div class="col-sm-3">
            <select class="form-control" required ng-init="data.lockedGldata = 0"
                    id="DeactivatedGlOption"
                    ng-model="data.lockedGldata"
                    ng-options="o.id as o.text for o in DeactivatedGlOptions"
                    ng-change="deactivatedChanged()">
                <option value="" disabled>Select an option...</option>
            </select>
        </div>
    </div>

1 个解决方案

#1


1  

I think, that when you click on first select. It listen to change of model deactivatedGlData, and in lockedChanged function, which is assigned to ng-change of this dropdown, there is mismatch. It listen to another dropdown, instead of self one, and that's why it's presenting in reverse.

我想,当你点击第一个选择。它监听模型deactivatedGlData的更改,并且在lockedChanged函数中,分配给此下拉列表的ng-change,存在不匹配。它听取另一个下拉菜单,而不是自己的下拉菜单,这就是它反向呈现的原因。

Could you try to switch order of ng-change?

你能尝试切换ng-change的顺序吗?

Instead of in two dropdowns in order:

而不是按顺序的两个下拉菜单:

            ng-change="lockedChanged()">
            ng-change="deactivatedChanged()">

Write:

            ng-change="deactivatedChanged()">
            ng-change="lockedChanged()">

#1


1  

I think, that when you click on first select. It listen to change of model deactivatedGlData, and in lockedChanged function, which is assigned to ng-change of this dropdown, there is mismatch. It listen to another dropdown, instead of self one, and that's why it's presenting in reverse.

我想,当你点击第一个选择。它监听模型deactivatedGlData的更改,并且在lockedChanged函数中,分配给此下拉列表的ng-change,存在不匹配。它听取另一个下拉菜单,而不是自己的下拉菜单,这就是它反向呈现的原因。

Could you try to switch order of ng-change?

你能尝试切换ng-change的顺序吗?

Instead of in two dropdowns in order:

而不是按顺序的两个下拉菜单:

            ng-change="lockedChanged()">
            ng-change="deactivatedChanged()">

Write:

            ng-change="deactivatedChanged()">
            ng-change="lockedChanged()">