Hide radiobutton when one value is selected from Dropdownlist using angularjs

Question

I have a dropdownlist which binds values as SITE,FIBER & OTHERS and below that there are 2 radibuttons named as Approve and Reject.

Now what I want is I want to hide the Reject radio button if FIBER is selected from the dropdownlist.

How to achieve this using Angular JS?

Below is my code:

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

NTP · Accepted Answer · 2019-04-10 13:17:01Z

1

You can use ng-if directive to achieve that. Code below will hide the reject button when utilitymodels value is 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

edited Apr 10, 2019 at 13:17

answered Apr 10, 2019 at 13:06

NTP

4,4483 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

HEEN Over a year ago

thanks for the fast response, I tried but it is not working as expected. Also, there is no error in console

NTP Over a year ago

@BN Added plunker demo for you, please compare your code with the working example.

HEEN Over a year ago

yes, its working in plunker. but I have no idea why its not working in my application

HEEN Over a year ago

you know what when I changed my code ng-if="UtilityModel == 'FIBER'" then on load the Reject button was hidden.

HEEN Over a year ago

i also tried disabling like this

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

but this also didn't worked

|

Collectives™ on Stack Overflow

Hide radiobutton when one value is selected from Dropdownlist using angularjs

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related