AngularJS : change font awsome icon color and background on click

Question

I am new to angularJS. what I want is , I have some social links icons along with textbox. by default linkedin icon is selected. when I click on facebook icon, then its color should be changed to blue background and also textbox with facebook link should get changed and linkedin background should be as gray as others icons.

How can I achieve using angularjs?

Any help would be great.

Thank You.

 app.controller('SocialIconController', function($scope) { $scope.option = "linkedin"; $scope.social_toggle = false; });

 .exhibitor_social_icon { background: #d7d6d6; height: 20px; width: 20px; padding: 5px 10px 5px; margin: 0 3px; cursor: pointer; } .linked_in_bg_color { background: #0077B5; width: auto; border: thin white solid; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div ng-app=""> <div class="form-group margin_top_20" ng-controller="SocialIconController"> <label class="col-md-2 col-sm-2 col-xs-12 control-label set_padding_0">Social Link</label> <div class="col-md-10 col-sm-10 col-xs-10 set_padding_0"> <span class="exhibitor_social_icon linked_in_bg_color margin_left_0" ng-click="social_toggle = !social_toggle" ng-class="{exhibitor_social_icon : !social_toggle, linked_in_bg_color : social_toggle}"> <i class="fa fa-linkedin text-white"></i> </span> <span class="exhibitor_social_icon" ng-click="social_toggle = !social_toggle" ng-class="{exhibitor_social_icon : !social_toggle, linked_in_bg_color : social_toggle}"> <i class="fa fa-facebook text-white" ></i> </span> <span class="exhibitor_social_icon"> <i class="fa fa-twitter text-white" ></i> </span> <input class="form-control margin_top_4" placeholder="www.linkedin.com/example" type="text" ng-show="!social_toggle"> <input class="form-control margin_top_4" placeholder="www.facebook.com/example" type="text" ng-show="social_toggle"> </div> </div> </div>

there are two text boxes by default in the stackoverflow code editor it should be only one by default.

Here is JSFiddle

Answer 1

Try this:

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

<style>
.fa{color:#333;background:gray;}
.selected{color:red;background:blue;}

</style> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 

</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

<i id="icon1" class="fa fa-bandcamp" aria-hidden="true" ng-class="{'selected':icon == 'icon1'} " ng-click="click('icon1')"></i><br/>
<i id="icon2" class="fa fa-bandcamp" aria-hidden="true" ng-class="{'selected':icon == 'icon2'} " ng-click="click('icon2')"></i><br/>
<i id="icon3" class="fa fa-bandcamp" aria-hidden="true" ng-class="{'selected':icon == 'icon3'} " ng-click="click('icon3')"></i>

<script>
//module declaration
var app = angular.module('myApp',[]);

//controller declaration
app.controller('myCtrl',function($scope){
    $scope.icon = "icon1";

$scope.click = function(item){
    $scope.icon = item;
}


});

</script> 

</body> 

</html>

Answer 2

You can put your icons into a list of objects with 2 properties :

$scope.socialArray = [
  {icon: "fa fa-linkedin text-white", selected:true}, 
  {icon: "fa fa-facebook text-white", selected:false}, 
  {icon: "fa fa-twitter text-white", selected:false}
];

Repeat it :

   <span ng-click="setBackgroundColor(social)" ng-class="{'linked_in_bg_color': social.selected, 'linked_in_bg_color_grey': !social.selected}" class="exhibitor_social_icon" ng-repeat="social in socialArray" >
    <i class={{social.icon}} ></i>
   </span>

Change the background on click or do some other actions :

$scope.setBackgroundColor = function(social){
    for(var i = 0; i < $scope.socialArray.length; i++){
      if( $scope.socialArray[i].icon != social.icon)
        $scope.socialArray[i].selected = false;
    }
    social.selected = !social.selected;
}

Demo

You can change your array :

$scope.socialArray = [
{icon: "fa fa-linkedin text-white", selected:true , placeholder:"www.linkedin.com/example"}, 
{icon: "fa fa-facebook text-white", selected:false, placeholder:"www.facebook.com/example"}, 
{icon: "fa fa-twitter text-white", selected:false, placeholder:"www.twitter.com/example"}
];

and use the placeholder for your input

Answer 3

  .social_icons_section .social_icon_radio_toggle { float: left; margin-right: 20px; height: 35px; } .social_icons_section .social_icon_radio_toggle label { float: left; width: 35px; height: 35px; overflow: hidden; cursor: pointer !important; margin-right: 5px; } .social_icons_section .social_icon_radio_toggle label span { text-align: center; font-size: 15px; margin: auto; display: block; } .social_icons_section .social_icon_radio_toggle label span i { margin-top: 12px; } .social_icons_section .social_icon_radio_toggle input { position: absolute; display: none; } .social_icons_section .social_icon_radio_toggle input:checked + span { background-color: #0077B5; color: #fff; min-height: 100%; width: 35px; line-height: 33px; } .social_icons_section .social_icon_radio_toggle input:not(:checked + span) { background-color: #d6d5d5; color: #FFFFFF; } .social_icons_section .social_icon_radio_toggle .linkedin, .social_icons_section .social_icon_radio_toggle .facebook, .social_icons_section .social_icon_radio_toggle .twitter { background-color: #d6d5d5; color: #FFFFFF; line-height: 33px; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 set_padding_0 social_icons_section" ng-app=""> <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> <label class="twitter" > <input type="radio" name="registration_options" ng-click="option='twitter'"> <span><i class="fa fa-twitter"></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 ng-show="option === 'twitter'"> <input class="form-control " placeholder="www.twitter.com/example" type="text" > </div> </div>

Is this the same that you wanted?

Here is JSFiddle

Hope this helps

AngularJS : change font awsome icon color and background on click

Question

3 answers

solution1
2 2016-12-08 08:34:04

solution2
2 2016-12-08 08:46:36

solution3
0 ACCPTED 2016-12-29 08:37:57

AngularJS : change font awsome icon color and background on click

Question

3 answers

solution1 2 2016-12-08 08:34:04

solution2 2 2016-12-08 08:46:36

solution3 0 ACCPTED 2016-12-29 08:37:57

solution1
2 2016-12-08 08:34:04

solution2
2 2016-12-08 08:46:36

solution3
0 ACCPTED 2016-12-29 08:37:57