Hervorhebungen Text in AngularJS

<header class="layer-bottom"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-2" 
      style="padding: 0;"> 
     <img src="resources/logo.png" 
      style="width: 60%;"> 
     </div> 

     <div class="col-md-8 navBar">  
      <span ng-click="ads();" style="color: #fff;"> 
       Ad on bill 
      </span> 

      <span class="divider">|</span> 

      <span ng-click="visibilityMessages();" style="color: #fff;"> 
       Messages 
      </span> 

      <span class="divider">|</span> 

      <span ng-click="visibility();" style="color: #fff;"> 
      Visibility 
      </span> 

      <span class="divider">|</span> 

      <span ng-click="pricePromotions()" style="color: #fff;"> 
       Price Promotions 
      </span> 
     </div> 

     <div class="col-md-2" style="margin-top: 1.5%"> 
     <!--<i class="fa fa-2x fa-bars" aria-hidden="true">--> 
     <span ng-bind="userObj.companyName"></span> 
      <button type="button" class="btn btn-default" ng-click="logout();"> 
      <span class="glyphicon glyphicon-log-out"></span> Log out 
     </button> 
     </div> 
    </div> 
    </div> 
</header>

Ich habe Zweifel ein text.Initially in Hervorhebung alle Überschriften haben die Farbe es die style.When angegeben i AdOnBill klicken, Hautfarbe oder Schriftgröße muss sein changed.How kann ich tun Das?Hervorhebungen Text in AngularJS

-Controller

scope.ads = function() { 
    location.path("/dashboard/messages"); 
}; 

scope.visibilityMessages = function() { 
    location.path("/dashboard/visibility_messages"); 
};

Quelle

2017-02-21 Anusha Bayya

Verwendung ng-Klasse seine gute Möglichkeit, CSS anzuwenden. https://docs.angularjs.org/api/ng/directive/ngClass –

können Sie ng-class verwenden:

<span ng-class="{className: condition}">Ad on bill</span>

Diese JSFiddle demo zeigt auch die Verwendung Sie es in Ihrem speziellen Fall möchten.

<a ng-click="setRed()">Set "Ad on bill" red!</a> 
<span ng-class="{red: isRed}">Ad on bill</span>

Wo setRed() gerade tun:

$scope.setRed = function() { 
    $scope.isRed = true; 
}

Quelle

2017-02-21 08:25:20 Mistalis

Sie ng-class oder ng-style für diesen Fall verwenden können, wie (ng-class):

<span ng-click="ads();" class="default" ng-class="{'change': isChangeStyle}"> 
    Ad on bill 
</span>

Controller:

$scope.isChangeStyle = false; 
// 
$scope.ads = function() { 
    $scope.isChangeStyle = true; 
};

CSS:

.default { 
    color: #fff; 
} 

.change { 
    color: #000; 
    font-size: 20px; 
}

Quelle

2017-02-21 08:26:03 WorkWe

können Sie verwenden ng-style für dieses

Die ngstyle Direktive ermöglicht es Ihnen, CSS-Stil auf einem HTML-Element bedingt einzustellen.

https://docs.angularjs.org/api/ng/directive/ngStyle

<span ng-click="ads();" style="color: #1ff;" ng-style="myObj"> 
     Ad on bill 
</span>

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="myCtrl"> 
 

 

 
<span ng-click="ads();" style="color: #1ff;" ng-style="myObj"> 
 
     Ad on bill 
 
</span> 
 
<br><br><br><br> 
 
<span ng-click="visibility();" style="color: black" ng-style="myObj"> 
 
     Remaining Tabs 
 
</span> 
 

 
<script> 
 
var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
$scope.ads = function(){ 
 
    $scope.myObj = { 
 
    "color" : "white", 
 
    "background-color" : "coral", 
 
    "font-size" : "30px", 
 
    "padding" : "20px" 
 
    } 
 
} 
 
    
 
$scope.visibility = function(){ 
 
    $scope.myObj = { 
 
    "color" : "black", 
 
    } 
 
} 
 
}); 
 
</script> 
 

 
</body> 
 
</html>

Führen Sie das ÜBER SNIPPET

HERE IS THE WORKING DEMO

EDIT

In den übrigen Methoden, fügen

$scope.myObj = { 
    "color" : "#fff", 

    }

Quelle

2017-02-21 08:27:14 Sravan

dies funktioniert, aber beim Klicken auf eine andere Registerkarte sollte die Größe normal werden. Thats funktioniert nicht –

"beim Klicken auf eine andere Registerkarte sollte die Größe normal werden", Was ist das für ein Tab? – Sravan

Es gibt vier Registerkarten. AdonBill, Message, Visibility, PricePromotion.Also klicken Sie auf AdonBill andere Registerkarten sollten in normaler Farbe sein. Ähnlich wie alle Registerkarten –

<span ng-click="visibility($event);" class="headerTabs" id="visibility"> 
       Visibility 
       </span> 
<span ng-click="pricePromotions($event);" class="headerTabs" id="pricePromotion"> 
       Price Promotions 
      </span> 
    scope.visibility = function($event){ 
       var tabs = document.getElementsByClassName("headerTabs"); 
       for(var i = 0;i < tabs.length;i++) { 
        if($event.target.id === tabs[i].id) 
         $event.target.style.color = "#fff"; 
        else 
         tabs[i].style.color = ""; 
       } 
      };

Dieser arbeitete :)

Quelle

2017-02-22 07:20:36

Hervorhebungen Text in AngularJS

Antwort

Verwandte Themen