堆棧內存溢出
  簡體   English   中英

AngularJS：單擊更改字體可怕的圖標顏色和背景

[英]AngularJS : change font awsome icon color and background on click

 原文  2016-12-08 07:48:24  7   3    javascript/ jquery/ css/ angularjs

問題描述

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

3 個解決方案

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

嘗試這個： 

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

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

您可以將圖標放入具有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;
}

演示

您可以更改數組： 

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

並使用占位符作為輸入

解決方案3
 0 已采納  2016-12-29 08:37:57

  .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

希望這可以幫助

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用angularjs更改背景和字體顏色 如何在點擊時更改背景顏色和字體顏色（無jQuery）？ 使用喜歡的字體可怕的排序圖標 使用語義UI添加字體驚人的圖標 為什么字體 awsome 圖標沒有顯示在網站上？ 添加了下載的 font-awsome 工具包 lnk 和圖標鏈接 使用 angularjs 更改背景顏色 單擊更改“真棒字體”圖標 單擊 angularJs 時更改圖標 更改點擊時的兒童字體顏色？ 在vis js中以任何形狀插入字體可怕的圖標
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM