我是 angularJS 的新手。我想要的是，我有一些社交链接图标和文本框。默认情况下 linkedin 图标处于选中状态。当我单击 facebook 图标时，其颜色应更改为蓝色背景，带有 facebook 链接的文本框也应更改，linkedin 背景应与其他图标一样灰色。
如何使用 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 代码编辑器中默认有两个文本框，默认情况下应该只有一个。
这里是JSFiddle
最佳答案
试试这个:
<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>
关于javascript - AngularJS : change font awsome icon color and background on click，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41034333/