stackoom
  简体   繁体   中英

Angular JS : visibility visible on click on radio button

 原文  2016-12-20 06:32:36  8   4    javascript/ html/ angularjs

Question

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 mb-xs w-xs btn-danger common_btn set_margin_0">Save</button> </div> </div>

Thank you.

4 answers

solution1
 1 ACCPTED  2016-12-20 06:55:29

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 mb-xs w-xs btn-danger common_btn set_margin_0">Save</button> </div> </div> </div> </body> </html>

solution2
 0  2016-12-20 06:42:50

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 mb-xs w-xs btn-danger common_btn set_margin_0">Save</button> </div> </div> </div> </body> </html>

solution3
 0  2016-12-20 06:52:53

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 mb-xs w-xs btn-danger common_btn set_margin_0">Save</button> </div> </div> </div>

solution4
 0  2016-12-20 07:03:55

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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question JS Toggle Visibility: How to Hide Already Visible Elements on Click Angular js Button click Angular Radio button click show and hide not working Angular JS : show text box relatively based on click on radio button and change background color of div How to get list of values which are selected in radio button after click on submit in Angular js angularJs Radio button not visible? Angular JS form with select, checkbox and radio button Radio Button Conflict between Bootstrap And Angular js Need to Default select an Angular JS Radio Button angular js default checked radio button
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM