Angular JS : show div based on radio button selection

Question

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
    <div class="radio_toggle">
        <label class="hubilo">
        <input type="radio" name="registration_options" checked="checked">
        <span>Company ABC</span></label>
        <label class="other" >
        <input type="radio" name="registration_options" ng-click="show_other=true">
        <span>Other</span></label>
        <label class="none" > 
        <input type="radio" name="registration_options" ng-click="display=false">
        <span>None</span></label>
    </div>
    <div class="form-group" ng-show="show_other">
        <label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
        <div class="col-md-10 col-sm-10 col-xs-12">
            <form role="form">
                <div class="form-group set_margin_0 set_padding_0">
                    <label>Button</label>
                    <input class="form-control" placeholder="Enter Button Name" type="text">
                </div>
            </form>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
        <div class="col-md-10 col-sm-10 col-xs-12">
            <span>Link</span>
            <input class="form-control" placeholder="http://" type="text">
        </div>
    </div>
</div>

clicking on company radio button only link will be opened and clicking on other radio button button text box and link , both should be opened. and clicking on none. both of them should hide.

Any help would be great.

Thank You.

Paulson Peter · Accepted Answer · 2016-12-06 07:36:02Z

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
    <div class="radio_toggle">
        <label class="hubilo">
        <input type="radio" name="registration_options" checked="checked" ng-click="option='company'" ng-init="option='company'">
        <span>Company ABC</span></label>
        <label class="other" >
        <input type="radio" name="registration_options" ng-click="option='other'">
        <span>Other</span></label>
        <label class="none" > 
        <input type="radio" name="registration_options" ng-click="option='none'">
        <span>None</span></label>
    </div>
    <div class="form-group" ng-show="option ==='other'">
        <label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
        <div class="col-md-10 col-sm-10 col-xs-12">
            <form role="form">
                <div class="form-group set_margin_0 set_padding_0">
                    <label>Button</label>
                    <input class="form-control" placeholder="Enter Button Name" type="text">
                </div>
            </form>
        </div>
    </div>
    <div class="form-group" ng-show="option ==='other' || option === 'company'">
        <label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
        <div class="col-md-10 col-sm-10 col-xs-12">
            <span>Link</span>
            <input class="form-control" placeholder="http://" type="text">
        </div>
    </div>
</div>

Following changes are done.

1) Clicked item is saved in 'option' variable.

2) Show the form field based on data in 'option' variable.

Tim · Accepted Answer · 2016-12-06 07:50:58Z

It is seems confusing because you want to start with the URL box shown so you need to use a mix of ng-show and ng-hide then override them on click.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
    <div class="radio_toggle">
        <label class="hubilo"><input type="radio" name="registration_options" checked="checked" ng-click="show_url=false;show_other=false"><span>Company ABC</span></label>
        <label class="other"><input type="radio" name="registration_options" ng-click="show_other=true;show_url=false"><span>Other</span></label>
        <label class="none"><input type="radio" name="registration_options" ng-click="show_other=false;show_url=true"><span>None</span></label>
    </div>

    <div class="form-group" ng-show="show_other">
        <label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
        <div class="col-md-10 col-sm-10 col-xs-12">
            <form role="form">
                <div class="form-group set_margin_0 set_padding_0">
                    <label>Button</label>
                    <input class="form-control" placeholder="Enter Button Name" type="text">
                </div>
            </form>
        </div>
    </div>

    <div class="form-group" ng-hide="show_url">
        <label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
        <div class="col-md-10 col-sm-10 col-xs-12">
            <span>Link</span>
            <input class="form-control" placeholder="http://" type="text">
        </div>
    </div>
</div>

Collectives™ on Stack Overflow

Angular JS : show div based on radio button selection

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related