Question

我的要求

当在另一个选择框中选择相同的选项时，我需要删除另一个选择框中存在的选项

我做了什么

我创建了3个选择框，并在其中加载了相同的值，我在enableAllOptions函数中创建了2个函数disableOptions enableAllOptions，并启用了所有选项第一次并在disableOptions基于从选择框

中选择的选项禁用选项

我正在粘贴功能齐全的Plunker供您参考（选择框中的数据加载存在问题）

这是我的HTML代码

<h1>{{title}}</h1>
<div class="container">
        <form role="form" calss="form-inline">
    <div class="form-group col-xs-3">
        <label>Select State:</label>
        <select class="form-control" [(ngModel)]="rules.State" id="sel1">
 <option *ngFor="#hey of states" value="{{hey.value}}">{{hey.name}}</option>
        </select>
    </div>
    <div class="form-group col-xs-3">
        <label>Rule:</label>
<input type="text" data-toggle="modal" data-target="#myModal"class="form-control">
    </div>
    <div class="form-group col-xs-3">
        <label>Pass State :</label>
        <select class="form-control" [(ngModel)]="rules.pass">
 <option *ngFor="#hey_pass of state_pass" value="{{hey_pass.value}}">{{hey_pass.name}}</option>
        </select>
    </div>
    <div class="form-group col-xs-3">
        <label>Fail State:</label>
        <select class="form-control" [(ngModel)]="rules.fail">
 <option *ngFor="#hey_fail of state_fail" value="{{hey_fail.value}}">{{hey_fail.name}}</option>
        </select>
    </div>
</form>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Rules Configuration</h4>
        </div>
        <div class="modal-body">
            <p>Rules</p>
        </div>
        <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>

   </div>
</div>

plunkr链接中的app.component.ts文件请查看，这可能是重复的问题，但这个问题是基于Angular 2.0而不是AngularJS 1.x。

Answer 1

您可以将（更改）事件用作：

 <select class="form-control" [(ngModel)]="rules.State" id="sel1" (change)="statechange($event.target.value)">
 <option *ngFor="#hey of states" value="{{hey.value}}">{{hey.name}}</option>
 </select>

在.ts文件中定义一个方法“statechange”并从states数组中删除该值。

Answer 2

略微改变了逻辑。我使用3而不是一个状态列表，每个状态列表用于每个选择下拉列表，每个州都有名称和禁用属性。请参阅示例代码以禁用该选项：

states = [{name：＆＃34; state1＆＃34;，disabled：false}，{name：＆＃34; state2＆＃34;，disabled：false}，{name：＆＃34; state3＆＃34 ;，disabled：false}，{name：＆＃34; state4＆＃34;，disabled：false}];

states1 = [{name：＆＃34; state1＆＃34;，disabled：false}，{name：＆＃34; state2＆＃34;，disabled：false}，{name：＆＃34; state3＆＃34 ;，disabled：false}，{name：＆＃34; state4＆＃34;，disabled：false}];

states2 = [{name：＆＃34; state1＆＃34;，disabled：false}，{name：＆＃34; state2＆＃34;，disabled：false}，{name：＆＃34; state3＆＃34 ;，disabled：false}，{name：＆＃34; state4＆＃34;，disabled：false}];

statechange（curState：string）{for（var i = 0; i＆lt; this.states.length; i ++）{

        if (this.states1[i].name == curState) {

            this.states1[i].disabled = true;
            this.states2[i].disabled = true;
        }
    }

}

如果其他选择框选项更改为Angular 2.0中的相同选项，如何添加和删除选择框选项

2 个答案: