change the text apperence using angular js

Question

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

Read through this c-sharpcorner.com/UploadFile/cd7c2e/…

Okky
– Okky

2014-06-11 11:30:36 +00:00
Commented Jun 11, 2014 at 11:30 — Okky
– Okky, Commented Jun 11, 2014 at 11:30

R3tep · Accepted Answer · 2014-06-11 11:48:10Z

3

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

edited Jun 11, 2014 at 11:48

answered Jun 11, 2014 at 11:34

R3tep

12.9k10 gold badges52 silver badges77 bronze badges

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

Comments

semirturgay · Accepted Answer · 2014-06-11 12:08:08Z

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

edited Jun 11, 2014 at 12:08

answered Jun 11, 2014 at 11:32

semirturgay

4,1993 gold badges32 silver badges50 bronze badges

Collectives™ on Stack Overflow

change the text apperence using angular js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related