html - 使用angularjs从下拉列表中选择一个值时隐藏单选按钮

Question

我有一个下拉列表，它将值绑定(bind)为 SITE、FIBER 和 OTHERS，下面有 2 个 radibuttons 命名为 Approve 和 拒绝。

现在我想要的是，如果从下拉列表中选择了 FIBER，我想隐藏 Reject 单选按钮。

如何使用 Angular JS 实现这一点？

下面是我的代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4/angular.min.js"></script>

<!-- dropdownlist -->

<select class="form-control" id="FiberLead_ddlUtility" ng-model="UtilityModel" ng-change="refreshAllDllCMM()">
    <option value="">Please Select</option>
    <option ng-value="UTILITY" ng-repeat="UTILITY in UTILITYS">{{UTILITY}}</option>
</select>

                                            
                                            
                                            
<!-- Radio button -->


<div class="customeRadioWrap">
    <div class="customeRadio">
        <input type="radio" id="rdApprove" name="radio-group"
               ng-value="true" ng-model="radioAppRejSelected">
        <label for="rdApprove">Approve</label>
    </div>
    <div class="customeRadio">
        <input type="radio" id="rdReject" name="radio-group"
               ng-value="false" ng-model="radioAppRejSelected">
        <label for="rdReject">Reject</label>
    </div>
    <button class="btn btn-default customBtn"
            ng-click="ConfirmApproveRejectCMM()">
      <i class="fa fa-check" aria-hidden="true"></i>
      Submit
    </button>
</div>

Answer 1

您可以使用 ng-if 指令来实现。当 utilitymodels 值为 FIBER 时，下面的代码将隐藏拒绝按钮。

<div class="customeRadio" ng-if="UtilityModel != 'FIBER'">
    <input type="radio" id="rdReject" name="radio-group" ng-value="false" ng-model="radioAppRejSelected">
    <label for="rdReject">Reject</label>
</div>

Demo