CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsforms
Lavanya D.
Lavanya D.

Reputation: 511

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

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.

enter image description here

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

Upvotes: 2

Views: 1973

Answers (3)

Ejo V Joy
Ejo V Joy

Reputation: 21

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>

Upvotes: 1

Manikandan Velayutham
Manikandan Velayutham

Reputation: 2228

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

Upvotes: 1

Rakesh Chand
Rakesh Chand

Reputation: 3113

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

Upvotes: 0

Related Questions