Ausblenden von Feldern in einem Formular basierend auf der ausgewählten Eingabe im Dropdown-Menü mit eckigem js

Lavanja D.

Wir versuchen, einige Felder in der Formularstruktur basierend auf einer anderen Auswahl im gleichen Formularfeld auszublenden. Hier wird das Formular basierend auf der Eingabe des Benutzers mithilfe einer Schleife (ng-repeat) generiert und ist nicht fest codiert.

Bildbeschreibung hier eingeben

Wenn im obigen Bild die Datenquelle als S3 ausgewählt ist, sollten die beiden unteren Felder nicht sichtbar sein. Wenn es als Redshift ausgewählt ist, sollte es sichtbar sein.

<!-- Block Modified to get additional tag details -->
        <div ng-repeat="item in metadataGovernance">
            <awsui-control-group validation-message="" label="{{item.governance === 'Required' ? displayName(item.tag) + '*' : displayName(item.tag)}}">
                <awsui-textfield ng-hide="item.allowedInputs.length>0" name="{{item.tag}}" data-disabled="false" ng-model="item.value"></awsui-textfield>
                <select ng-show="item.allowedInputs.length>0" ng-model="item.value" class="awsui-textfield">
                    <option value="" selected="selected">Choose one</option>
                    <option ng-repeat="input in item.allowedInputs" value="{{input}}">{{input}}</option>
                </select>
                <div class="hoverDesc awsui-button-icon awsui-icon question-circle" style="float: right;margin-left: -67px;margin-right: -28px;">
                    <span class="hoverDescText">{{item.description}}</span>
                </div>  
            </awsui-control-group>
        </div>
        <!-- End of Block Modified to get additional tag details -->
rakeschand

Setzen Sie eine ng-show/ng-hide-Anweisung und geben Sie eine Bedingung an wie ng-show="item.value !== 'S3'"

<!-- Block Modified to get additional tag details -->
<div ng-repeat="item in metadataGovernance">
  <awsui-control-group validation-message="" label="{{item.governance === 'Required' ? displayName(item.tag) + '*' : displayName(item.tag)}}">
    <awsui-textfield ng-hide="item.allowedInputs.length>0" name="{{item.tag}}" data-disabled="false" ng-model="item.value"></awsui-textfield>
    <select ng-show="(item.allowedInputs.length > 0) || item.value!== 'S3'" ng-model="item.value" class="awsui-textfield">
      <option value="" selected="selected">Choose one</option>
      <option ng-repeat="input in item.allowedInputs" value="{{input}}">{{input}}</option>
    </select>
    <div class="hoverDesc awsui-button-icon awsui-icon question-circle" style="float: right;margin-left: -67px;margin-right: -28px;" ng-show="item.value!== 'S3'">
      <span class="hoverDescText">{{item.description}}</span>
    </div>
  </awsui-control-group>
</div>
<!-- End of Block Modified to get additional tag details -->

Verwandte Artikel