title: Hiding fields in a form based on selected input in drop down using angular js
body: <p>We are trying to hide few fields based in the form structure based another selection in the same form field. Here the form is generated based on input from the user using loop (ng-repeat) and is not hard coded.</p>
  
  <p><a href="https://i.stack.imgur.com/RWCet.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RWCet.png" alt="enter image description here"></a></p>
  
  <p>In the above image if the data source is chosen as S3 then the below two fields should not be visible. If it is chosen as Redshift then it should be visible.</p>
  
  <pre><code>&lt;!-- Block Modified to get additional tag details --&gt;
          &lt;div ng-repeat="item in metadataGovernance"&gt;
              &lt;awsui-control-group validation-message="" label="{{item.governance === 'Required' ? displayName(item.tag) + '*' : displayName(item.tag)}}"&gt;
                  &lt;awsui-textfield ng-hide="item.allowedInputs.length&gt;0" name="{{item.tag}}" data-disabled="false" ng-model="item.value"&gt;&lt;/awsui-textfield&gt;
                  &lt;select ng-show="item.allowedInputs.length&gt;0" ng-model="item.value" class="awsui-textfield"&gt;
                      &lt;option value="" selected="selected"&gt;Choose one&lt;/option&gt;
                      &lt;option ng-repeat="input in item.allowedInputs" value="{{input}}"&gt;{{input}}&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;div class="hoverDesc awsui-button-icon awsui-icon question-circle" style="float: right;margin-left: -67px;margin-right: -28px;"&gt;
                      &lt;span class="hoverDescText"&gt;{{item.description}}&lt;/span&gt;
                  &lt;/div&gt;  
              &lt;/awsui-control-group&gt;
          &lt;/div&gt;
          &lt;!-- End of Block Modified to get additional tag details --&gt;
  </code></pre>