change the text apperence using angular js

All we need is an easy explanation of the problem, so here it is.

am new to angular js using this
ihave to perform following operation
i have a text name bob.and a button like bold and italic
while cliking on the bold button i want to bold the text BOB
and italic while clicking the italic button

here is the code

html

 <div ng-controller="MyCtrl">
      <input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" >
          <button ng-click="chiliSpicy()">bold</button>
     <button ng-click="jalapenoSpicy()">italic</button>
    <br>{{rootFolders}}
    </div>

code

  var app = angular.module('myApp',[]);

    function MyCtrl($scope) {   

    }

jfiddle

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Try to use the directive ng-class. Create two boolean, and set values when you click on the buttons. When the boolean is changing, the ng-class is updating.

Live demo

HTML:

<div ng-controller="MyCtrl" ng-init="bold = false; italic = false">
    <input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" />
    <button ng-click="bold = !bold">
        Bold
    </button>
    <button ng-click="italic = !italic">
        Italic
    </button>
    <br/>
    <span ng-class="{'bold': bold, 'italic': italic}">
        {{rootFolders}}
    </span>
</div>

CSS:

.bold {
  font-weight: bold
}

.italic{
  font-style : italic;
}

Reference

Method 2

here is a working fiddle fiddle

HTML:

<div ng-controller="MyCtrl">
  <input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" >
 <button ng-click="chiliSpicy()">bold</button>
 <button ng-click="jalapenoSpicy()">italic</button>
     <span class="{{class}}">
         {{rootFolders}}
     </span>
      <br>rootFolders={{rootFolders}}
</div>

JS:

var app = angular.module('myApp',[]);

function MyCtrl($scope) {
$scope.class=""    
    $scope.chiliSpicy=function(){
    $scope.class="text_type_bold"
    }
       $scope.jalapenoSpicy=function(){
    $scope.class="text_type_italic"
    }
}

CSS:

.text_type_bold{
    font-style:none;
 font-weight:bold;
}

.text_type_italic{
    font-weight:normal;
 font-style:italic;
}

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply