Question

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

如何使用angularjs实现？

任何帮助都会很棒。

谢谢。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

这是JSFiddle

Answer 1

试试这个：

<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

您可以将图标放入具有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}
];

重复一遍：

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

点击后更改背景或执行其他操作：

$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

您可以更改阵列：

$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"}
];

并使用占位符作为输入

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>

这和你想要的一样吗？

这是JSFiddle

希望这有帮助

AngularJS：点击更改字体awsome图标颜色和背景

3 个答案: