Javascript AngularJS：点击后更改字体、图标颜色和背景_Javascript_Jquery_Css_Angularjs

Javascript AngularJS：点击后更改字体、图标颜色和背景

javascript jquery css angularjs

Javascript AngularJS：点击后更改字体、图标颜色和背景,javascript,jquery,css,angularjs,Javascript,Jquery,Css,Angularjs,我对angularJS是新手。我想要的是，我有一些社交链接图标和文本框。默认情况下，linkedin图标处于选中状态。当我点击facebook图标时，它的颜色应该改为蓝色背景，带有facebook链接的文本框也应该改变，linkedin背景应该和其他图标一样灰色如何使用angularjs实现目标任何帮助都会很好多谢各位 app.controller（'concontroller'，函数（$scope）{ $scope.option=“linkedin”； $scope.social_t

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

如何使用angularjs实现目标

任何帮助都会很好

多谢各位

app.controller（'concontroller'，函数（$scope）{
$scope.option=“linkedin”；
$scope.social_toggle=false；
});
。参展商\社交\图标{
背景：#D7D6；
高度：20px；
宽度：20px；
填充物：5px 10px 5px；
利润率：0.3倍；
光标：指针；
}
.linked_in_bg_颜色{
背景#0077B5；
宽度：自动；
边界：薄白色固体；
}

社会联系
试试这个：
<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> 


.fa{颜色：#333；背景：灰色；}
.选定{颜色：红色；背景：蓝色；}




//模块声明
var-app=angular.module（'myApp'，[]）；
//控制器声明
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.icon=“icon1”；
$scope.click=功能（项目）{
$scope.icon=项目；
}
});
您可以将图标放入具有两个属性的对象列表中：
$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>

并使用占位符进行输入
。社交图标部分。社交图标无线电切换{
浮动：左；
右边距：20px；
高度：35px；
}
.社交图标\u部分.社交图标\u收音机\u切换标签{
浮动：左；
宽度：35px；
高度：35px；
溢出：隐藏；
光标：指针！重要；
右边距：5px；
}
.social_icons_部分。social_icon_radio_切换标签范围{
文本对齐：居中；
字体大小：15px；
保证金：自动；
显示：块；
}
.social_icons_部分。social_icon_radio_切换标签span i{
边缘顶部：12px；
}
.social_icons_部分。social_icon_radio_切换输入{
位置：绝对位置；
显示：无；
}
.social_icons_部分。social_icon_radio_切换输入：选中+span{
背景色：#0077B5；
颜色：#fff；
最小高度：100%；
宽度：35px；
线高：33px；
}
.social_icons_部分。social_icon_radio_切换输入：非（：选中+范围）{
背景色：#d6d5d5；
颜色：#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{
背景色：#d6d5d5；
颜色：#FFFFFF；
线高：33px；
}

请编辑问题以提供答案。按原样，代码不运行<代码>未捕获引用错误：未在window.onload（（索引）：46）中定义应用程序。

谢谢。。但当我点击facebook图标时，就会出现带有facebook的文本。其他图标应该消失你的意思是我们不应该看到除所选图标以外的其他图标？例如，如果你点击facebook的“f”，其他的块应该看起来像空盒子？我的意思是。。当我选择facebook时，只有它的相关文本框会出现，其他文本框会消失。就像展示一样：我很乐意帮助你。

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

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