Angular JS : show text box relatively based on click on radio button and change background color of div

Question

image

I am new to angularjs. as shown in the image , by default linkedin radio button is selected.

but when i select on facebook radio button then two textboxes appears for 1 sec and hide the linked in textbox.

when i click on linkedin button then linked in textbox should appear and other textbox should get disappear and when i click on facebook radio button then facebook textbox should appear.

here is JSFiddle

Thank You.

  .social_icon_radio_toggle { float: left; margin-right: 20px; } label { float: left; width: 35px; height: 35px; overflow: hidden; cursor: pointer !important; margin-right: 5px; } span { text-align: center; font-size: 15px; margin: auto; display: block; } input { position: absolute; } //wheather radio button is checked or not input:checked + span { background-color: $linked_in_bg_color; color: #fff; min-height: 100%; width: 35px; line-height: 33px; } input:not(:checked + span) { background-color: #edf1f2; color: #58666e; } .linkedin { background-color: #edf1f2; color: #58666e; border: thin #a8a8a8 solid; color: #a8a8a8; line-height: 33px; } .facebook { background-color: #edf1f2; color: #58666e; border: thin #ced9db solid; line-height: 35px; } 

 <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 set_padding_0 social_icons_section"> <div class="social_icon_radio_toggle"> <label class="linkedin"> <input type="radio" name="registration_options" checked="checked" ng-click="option='linkedin'" ng-init="option='linkedin'"> <span><i class="fa fa-linkedin"></i> </span></label> <label class="facebook"> <input type="radio" name="registration_options" ng-click="option='facebook'"> <span><i class="fa fa-facebook"></i> </span></label> </div> <div> <input class="form-control margin_top_4" placeholder="www.linkedin.com/example" type="text" ng-show="option == 'linkedin'" ng-hide="option == 'facebook'"> </div> <input class="form-control margin_top_4" placeholder="www.facebook.com/example" type="text" ng-show="option == 'facebook'" ng-hide="option == 'linkedin'"> </div> 

Answer 1

You should use the directive ng-model to track the value of your 'option' property. Then set per every radio button the corresponding ng-value.

And take into account, that ng-show and ng-hide works in similar ways. It is not necessary to use both at the same time. ng-hide = hide the element if the expression = true ng-show = show the element if the expression = true

<label class="linkedin" >
<input type="radio" name="registration_options"  ng-model="option" ng-value="'linkedin'">
<span><i class="fa fa-linkedin"></i> </span></label>
<label class="facebook" >
<input type="radio" name="registration_options" ng-value="'facebook'" ng-model="option">
 <span><i class="fa fa-facebook"></i> </span></label>

<input class="form-control margin_top_4" placeholder="www.linkedin.com/example" type="text" ng-show="option == 'linkedin'">
<input class="form-control margin_top_4" placeholder="www.facebook.com/example" type="text" ng-show="option == 'facebook'">

Working Sample: https://plnkr.co/edit/ezDAwU41vYKrw7DwWJAB

Answer 2

  .social_icon_radio_toggle{ float: left; margin-right: 20px; } label { float:left;width:35px; height:35px;overflow:hidden;cursor: pointer !important; margin-right: 5px;} span {text-align:center;font-size: 15px;margin:auto;display: block;} input {position:absolute;} //wheather radio button is checked or not input:checked + span {background-color:$linked_in_bg_color;color:#fff; min-height: 100%; width: 35px; line-height: 33px;} input:not(:checked + span) {background-color:#edf1f2;color:#58666e;} .linkedin {background-color:#edf1f2;color: #58666e; border: thin #a8a8a8 solid; color: #a8a8a8;line-height: 33px;} .facebook {background-color:#edf1f2;color: #58666e;border: thin #ced9db solid; line-height: 35px;} 

 <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 set_padding_0 social_icons_section"> <div class="social_icon_radio_toggle"> <label class="linkedin"> <input type="radio" name="registration_options" checked="checked" ng-click="option='linkedin'" ng-init="option='linkedin'"> <span><i class="fa fa-linkedin"></i> </span></label> <label class="facebook" > <input type="radio" name="registration_options" ng-click="option='facebook'"> <span><i class="fa fa-facebook"></i> </span></label> </div> <div type="text" ng-show="option === 'linkedin'" > <input class="form-control " placeholder="www.linkedin.com/example" > </div> <div ng-show="option === 'facebook'"> <input class="form-control " placeholder="www.facebook.com/example" type="text" > </div> </div> 

Here is updated JSFiddle

Hope this helps.