Change text with angular js

Question

I am new to angular js, using this I have to perform the following operation I have a text name bob.and a button similar to bold and italic when I click on the bold button, I want to highlight the text BOB and italics by pressing 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

Answer 1

here is the 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; } 

Answer 2

Try using the ng-class directive. Create two logical values ​​and set the values ​​when you click on the buttons. When the boolean value changes, the ng-class updated.

demo version

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

---

Link

• AngularJS ngClass
• AngularJS ngInit