角度jsを使用してドロップダウンで選択した入力に基づいてフォームのフィールドを非表示

Question

同じフォームフィールドの別の選択に基づいてフォーム構造に基づいてフィールドを隠すことはほとんどありません。ここで、フォームは、ループ（NGリピート）を使用して、ユーザからの入力に基づいて生成され、ハードコードされていません。上記画像における

データソースはS3として選択された場合、以下の2つのフィールドは、表示されてはなりません。 Redshiftとして選択されている場合は、それが表示されます。

<!-- 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 --> 

Answer 1

NG-ショー/ NG-非表示ディレクティブを入れて、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 --> 

Answer 2

のような条件を与える！ - 追加のタグの詳細を取得するために変性ブロック - >

<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> 
     <div ng-if="item.value == 'Redshift'"> 
      <select 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> 
     <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> 

Answer 3

使用

NG-IF

<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-if="(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-if="item.value!== 'S3'"> 
      <span class="hoverDescText">{{item.description}}</span> 
     </div> 
    </awsui-control-group> 
</div>