AngularJS：点击更改字体awsome图标颜色和背景 [英] AngularJS : change font awsome icon color and background on click

问题描述

我是angularJS的新手。我想要的是，我有一些社交链接图标和文本框。默认情况下，选择 linkedin 图标。当我点击Facebook图标时，它的颜色应该改为蓝色背景，并且带有facebook链接的文本框也应该改变， linkedin 背景应该像其他图标一样灰色。

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.

如何使用angularjs？

How can I achieve using angularjs?

任何帮助都会很棒。

谢谢。

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>

有两个默认情况下，在stackoverflow代码编辑器中它应该只有一个文本框。

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

这是 JSFiddle

推荐答案

	.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?

这是 JSFiddle

希望这有助于

这篇关于AngularJS：点击更改字体awsome图标颜色和背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！