使用angular js根据下拉列表中的选定输入隐藏表单中的字段

Posted 2023-05-09

【中文标题】使用angular js根据下拉列表中的选定输入隐藏表单中的字段

【英文标题】：Hiding fields in a form based on selected input in drop down using angular js

【发布时间】：2017-10-23 04:47:28

【问题描述】：

我们试图隐藏基于表单结构中的少数字段，基于同一表单字段中的另一个选择。这里的表单是根据用户使用循环（ng-repeat）的输入生成的，并且没有硬编码。

在上图中，如果数据源选择为 S3，则以下两个字段不可见。如果它被选为 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 -->

【问题讨论】：

你能展示一下你的json是怎么回事吗？

你能再添加一些代码吗？

使用 ng-if / ng-show / 隐藏 ng-if="dataSource == 'Redshift'"

显示您的完整代码...

metaDataGovernance 是一个使用 ng-repeat 显示的对象数组，其中一些对象显示为下拉一些作为输入文本框。在这里，假设选择“红移”某些对象应该被隐藏/禁用，这些对象是元数据治理的对象。

【参考方案1】：

!-- 块被修改以获得额外的标签细节-->

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

【参考方案2】：

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

【参考方案3】：

放置一个 ng-show/ng-hide 指令并给出类似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 -->