CODEWITHSUNDEEP
angularjs
Anusha Bayya
Anusha Bayya

Reputation: 103

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

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

Upvotes: 0

Views: 115

Answers (4)

Anusha Bayya
Anusha Bayya

Reputation: 103

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

Upvotes: 0

Sravan
Sravan

Reputation: 18647

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

  }

Upvotes: 0

Mistalis
Mistalis

Reputation: 18279

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

Upvotes: 0

Huy Chau
Huy Chau

Reputation: 2240

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

Upvotes: 1

Related Questions