Highlighting text in AngularJs

Question

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

I have a doubt in highlighting a text.Initially all the headings have the color specified it the style.When i click AdOnBill , color or font-size has to be changed.How can I do that?

Controller

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

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

Use ng-class its good way to apply css. docs.angularjs.org/api/ng/directive/ngClass — Manikandan Velayutham
– Manikandan Velayutham, Commented Feb 21, 2017 at 9:07

Huy Chau · Accepted Answer · 2017-02-21 08:26:03Z

1

You can use ng-class or ng-style for this case, such as (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;
}

answered Feb 21, 2017 at 8:26

Huy Chau

2,24821 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mistalis · Accepted Answer · 2017-02-21 08:31:49Z

0

You can use ng-class:

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

This JSFiddle demo shows well the use you want to make of it in your specific case.

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

Where setRed() just do:

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

edited Feb 21, 2017 at 8:31

answered Feb 21, 2017 at 8:25

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Comments

Sravan · Accepted Answer · 2017-02-21 11:33:08Z

0

You can use ng-style for this

The ngStyle directive allows you to set CSS style on an HTML element conditionally.

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>

PLEASE RUN THE ABOVE SNIPPET

HERE IS THE WORKING DEMO

EDIT:

In the remaining methods,add

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

  }

edited Feb 21, 2017 at 11:33

answered Feb 21, 2017 at 8:27

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

5 Comments

Anusha Bayya Over a year ago

this is working but on click of another tab the size should become normal.Thats not working

Sravan Over a year ago

"on click of another tab the size should become normal", what is that tab?

Anusha Bayya Over a year ago

There are four tabs.AdonBill , Message,Visibility,PricePromotion.So On click AdonBill other tabs should be in normal color.similar to all the tabs

Anusha Bayya Over a year ago

as u click on AdOnBill it is getting highlighted ryt.I want that on all the tabs.But in above Remaining tabs not getting highlighted

Sravan Over a year ago

add ng-style="myObj" to all tabs

Anusha Bayya · Accepted Answer · 2017-02-22 07:20:36Z

0

    <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 = "";
                }
            };

This one worked :)

answered Feb 22, 2017 at 7:20

Anusha Bayya

1031 gold badge5 silver badges18 bronze badges

Collectives™ on Stack Overflow

Highlighting text in AngularJs

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related