时间戳

首页 > 解决方案 > 如何根据另一个下拉菜单选择的条件删除和添加下拉列表值？

javascript - 如何根据另一个下拉菜单选择的条件删除和添加下拉列表值？

问题描述

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

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

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>

你们能帮我实现这一目标吗？

提前致谢。

标签： javascriptangular

解决方案

我认为您正在寻找的是根据特定逻辑动态填充下拉列表。这个stackoverflow 答案涵盖了 AngularJS 和 Angular 8的 stackoverflow question + blog。但是，我无法帮助您处理业务逻辑本身，因为我不清楚。

推荐阅读