Question

我们试图在同一表单字段中基于另一个选择隐藏基于表单结构的少数字段。这里表单是基于用户使用循环（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 -->

Answer 1

！ - 阻止修改以获取其他标记详细信息 - ＆gt;

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

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

使用角度js在下拉列表中隐藏基于所选输入的表单中的字段

3 个答案: