如何在Angular中根据另一个下拉框选择的条件删除和添加下拉框值？

Question

如何在Angular中根据另一个下拉框选择的条件删除和添加下拉框值？

6

我的要求：我需要创建一个表单行，其中包含两个选择下拉框和最后一个添加和删除按钮 1. 第一个下拉列表将具有值的列表 ['one'， 'two'， 'three'，'four']。 2. 第二个下拉列表将具有条件['and'，'or']

假设选择的表单值为['one']['and']，然后单击添加按钮，那么第二行将创建。在这里，第一个下拉列表不应显示“one”值，因为条件是“and”。如果用户选择了“or”，则它应该显示所有值。类似地，对于所有行，我都必须在Angular中创建逻辑。

HTML代码:

<div class="state-filter-conditions-grid subs-model-sec filter-grid" *ngFor="let filterCondition of filters;  index as i">
  <!-- OUTPUT PROPERTY -->

    <ng-container *ngTemplateOutlet="filterView == 'subscription'? attrs: map; context: { index: i }"></ng-container>


  <!-- CONNECTOR CONDITION -->
  <div class="dt-attr valueCondition ctrl-condition minimal">
    <div class="abs-cheveron select-box-cheveron">
      <select class="state-select" [(ngModel)]="filters[i].op">
        <option *ngFor="let val of op" [value]="val">{{val}}</option>
      </select>
    </div>

  </div>
  <!-- INPUT -->
  <ng-container *ngTemplateOutlet="filterView != 'subscription'? attrs: map; context: { index: i }"></ng-container>
  <!-- SELECT -->
  <div class="dt-attr icons center-align">
    <select class="ctrl-condition" *ngIf="!(i==filters.length-1)" [(ngModel)]="filters[i].logop" (change)="operatorChange(filters[i])">
      <option *ngFor="let val of logop" [value]="val">{{val}}</option>
    </select>

  </div>
  <!-- ICONS -->

  <div class="dt-attr icons center-align">
    <button *ngIf="i==filters.length-1" class="add-btn" (click)="addStateConditionRow()"><i
        class="fa fa-sm fa-plus add-icon" aria-hidden="true"></i></button>
    <button *ngIf="i>0" class="delete-btn" (click)="deleteStateConditionRow(i)"><i
        class="fa fa-sm fa-trash delete-icon"></i></button>
  </div>
</div>

<ng-template  #attrs let-i="index">
  <div class="dt-attr ">
    <ng-container *ngIf="!dataProps">
      <input class="ctrl-attr" type="text" [(ngModel)]="filters[i].value">
    </ng-container>
    <ng-container *ngIf="dataProps">
      <select class="value-select" [(ngModel)]="filters[i].value">
        <option *ngFor="let data of dataProps" [value]="data.attrId">{{data.attrName}}</option>
      </select>
    </ng-container>
  </div>
</ng-template>

<ng-template  #map let-i="index">
  <div class="dt-attr ctrl-condition minimal">
    <input class="ctrl-attr" type="text" clickOutside (clickOutside)="closeAccordion($event)" (click)="openAccordion($event)" [(ngModel)]="filters[i].attribute">
    <div *ngIf="showAccordion" class="state-filter-accordion" style="position: absolute;
    top: 105%;
    width: 100%;z-index:1">
      <app-common-accordion-mapping [filterInputRef]="filterInputRef" [inputAttributes]='inputAttributes' ></app-common-accordion-mapping>
    </div>
  </div>
</ng-template>

你们能帮我实现这个吗？

提前感谢。

- bagya

1

这个网站是为了寻求代码帮助，而不是让别人为你编写代码...展示一下你目前已有的代码，也许会有人指引你正确的方向... - vanowm

3

请问您能否提供一个代码片段或是 StackBlitz/CodePen/JSFiddle 等可以进行测试的环境呢？如果没有看到您的数据来源和示例，我们无法为您提供帮助。而且，您的实际问题也很难理解。如果有示例并且我们可以看到数据、HTML、TS 等内容，那将会更容易些。谢谢。 - Kinglish

1

@bagya，你可以使用<ng-container *ngFor="let val of op"><option *ngIf="<replace by your condition>">..</option></ng-container>。你需要找到“条件”来显示选项或不显示。记住，由于你正在使用ngModel，所以可以使用变量来创建条件。 - Eliseo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DaraKnot · Answer 1

我认为你想要的是基于特定逻辑动态填充下拉菜单。这个 stackoverflow 答案涵盖了 AngularJS，一个stackoverflow问题和博客则讲解了 Angular 8。然而我无法帮助你处理业务逻辑本身，因为对我来说不太清楚。