Hiding fields in a form based on selected input in drop down using angular js

Question

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.

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.

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

metaDataGovernance is an array of objects which are displayed using ng-repeat, out of which some objects are displayed as drop down some as input text box. Here , upon selection of say, suppose "redshift" certain objects should be hidden/disabled which are objects of metadatagovernance. — Lavanya D.
– Lavanya D., Commented May 23, 2017 at 10:15

Rakesh Chand · Accepted Answer · 2017-09-06 13:15:12Z

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

Rakesh Chand · Accepted Answer · 2017-09-06 13:27:02Z

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

Rakesh Chand · Accepted Answer · 2017-05-23 09:54:53Z

Put a ng-show/ng-hide directive and give a condition like 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 -->

Collectives™ on Stack Overflow

Hiding fields in a form based on selected input in drop down using angular js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related