AngularJS：单击更改字体可怕的图标颜色和背景

Question

I am new to angularJS. 我是angularJS的新手。 what I want is , I have some social links icons along with textbox. 我想要的是，我有一些社交链接图标以及文本框。 by default linkedin icon is selected. 默认情况下，已选择linkedin图标。 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. 当我单击facebook图标时，其颜色应更改为蓝色背景，带有facebook链接的文本框也应更改，并且linkedin背景应与其他图标一样灰。

How can I achieve using angularjs? 如何使用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. 默认情况下，stackoverflow代码编辑器中有两个文本框，默认情况下应该只有一个。

Here is JSFiddle 这是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 : 您可以将图标放入具有2个属性的对象列表中：

$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 这是JSFiddle

Hope this helps 希望这可以帮助

AngularJS：单击更改字体可怕的图标颜色和背景

问题描述

3 个解决方案

解决方案1
2 2016-12-08 08:34:04

解决方案2
2 2016-12-08 08:46:36

解决方案3
0 已采纳 2016-12-29 08:37:57

AngularJS：单击更改字体可怕的图标颜色和背景

问题描述

3 个解决方案

解决方案1 2 2016-12-08 08:34:04

解决方案2 2 2016-12-08 08:46:36

解决方案3 0 已采纳 2016-12-29 08:37:57

解决方案1
2 2016-12-08 08:34:04

解决方案2
2 2016-12-08 08:46:36

解决方案3
0 已采纳 2016-12-29 08:37:57