3

I have two radio buttons , two textboxes and a button.

When i click on 1st button then only one text box should appear , when i click on second button , two textboxes should appear.

but i want to do it with visibility:hidden|visible property as I want button position to be fixed below two text boxes.

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="form-group">
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
        <div class="basic_info_radio_toggle">
            <label class="one">
                <input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
                <span>One</span></label>
            <label class="two">
                <input type="radio" name="registration_options" ng-click="option='two'">
                <span>Two</span></label>

        </div>
    </div>
</div>

<div class="form-group" ng-show="option ==='two'">
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
    <div class="col-lg-10 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 ==='two' || option === 'one'">
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
        <span>Link</span>
        <input class="form-control" placeholder="http://" type="text">
    </div>
</div>


<div class="form-group">
    <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
        <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>

    </div>
</div>

Thank you.

Improve this question
1
  • could you create a plunker, plnkr.co/edit Commented Dec 20, 2016 at 6:54

4 Answers 4

Reset to default
1

Try ng-style directive:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
    <script>
        var app = angular.module("TestApp", []);
        app.controller("myCtrl", function () {            
        });
    </script>
    <div ng-app="TestApp" ng-controller="myCtrl">
        <div class="form-group">
            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
                <div class="basic_info_radio_toggle">
                    <label class="one">
                        <input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
                        <span>One</span></label>
                    <label class="two">
                        <input type="radio" name="registration_options" ng-click="option='two'">
                        <span>Two</span></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
            <div class="col-lg-10 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-style="{visibility: option == 'two' ? 'visible' : 'hidden'}">
            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
                <span>Link</span>
                <input class="form-control" placeholder="http://" type="text">
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
                <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
            </div>
        </div>
    </div>
</body>
</html>

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

Comments

0

Please try by using a function rather than using the inline definition. Also I will prefer to use ng-if rather than ng-show because ng-if will block rendering the HTML template if the condition is wrong. Please try the below code snippet.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>

<script>
    var app = angular.module("TestApp", []);
    app.controller("myCtrl", function ($scope) {
        $scope.setVisibility = function(val){
            var resultVal = (val == 'one')? 'one' : 'other';
            $scope.option = resultVal;
        }
    });
</script>

<div ng-app="TestApp" ng-controller="myCtrl">
    <div class="form-group">
        <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
            <div class="basic_info_radio_toggle">
                <label class="one">
                    <input type="radio" name="registration_options" checked="checked" ng-click="setVisibility('one')" ng-init="option='one'">
                    <span>One</span></label>
                <label class="two">
                    <input type="radio" name="registration_options" ng-click="setVisibility('two')">
                    <span>Two</span></label>

            </div>
        </div>
    </div>

    <div class="form-group" ng-if="option ==='other'">
        <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
        <div class="col-lg-10 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-if="option ==='other' || option === 'one'">
        <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
            <span>Link</span>
            <input class="form-control" placeholder="http://" type="text">
        </div>
    </div>


    <div class="form-group">
        <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
            <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>

        </div>
    </div>
</div>


</body>

</html>

Improve this answer

2 Comments

when i click on 2nd radio button , two textboxes should appear instead of disappearing textbox
thank you for your answer. but i don't want save button position to be changed. when you click on 2nd radio button button gets down. instead of it should be there and 2nd textbox should visible. so there will be default some space between Link textbox and save button.
0

I don't see you have initialized your angular app.

Try this one:

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script>
 angular.module("MyApp", []); //angular app
</script>

<div ng-app="MyApp">

<div class="form-group">
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
        <div class="basic_info_radio_toggle">
            <label class="one">
                <input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
                <span>One</span></label>
            <label class="two">
                <input type="radio" name="registration_options" ng-click="option='two'">
                <span>Two</span></label>

        </div>
    </div>
</div>

<div class="form-group">
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
    <div class="col-lg-10 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-class="{'invisible':option =='one'}">
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
        <span>Link</span>
        <input class="form-control" placeholder="http://" type="text">
    </div>
</div>

<div class="form-group">
    <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
        <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>

    </div>
</div>
</div>

Improve this answer

1 Comment

thank you for your answer. but i don't want save button position to be changed. when you click on 2nd radio button button gets down. instead of it should be there and 2nd textbox should visible. so there will be default some space between Link textbox and save button.
0

You can try this with ng-class

CSS

<style>
 .visibleOff{visibility: hidden;}
</style>

HTML

<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
    <div class="basic_info_radio_toggle">
        <label class="one">
            <input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
            <span>One</span></label>
        <label class="two">
            <input type="radio" name="registration_options" ng-click="option='two'">
            <span>Two</span></label>

    </div>
   </div>
</div>

 <div class="form-group" >
 <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 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-class="{'visibleOff': option == 'one'}">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
    <span>Link</span>
    <input class="form-control" placeholder="http://" type="text">
</div>
 </div>


 <div class="form-group">
  <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
    <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>

   </div>
</div>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.