Athi Athi - 6 months ago 8
AngularJS Question

how to give font style in angular js

I have a text for eg: "Ram is 24 kg"

This text is coming based on some calculation. These calculation I am doing in my angularjs controller.I want to give styling for these text like "Ram is" in areal font and "24 kg" is in red color times new roman font. How can I achieve this using angularjs

In javascript we can use innerhtml. But how can i implement this in angularjs

here is my sample code

if(condition)
name = $scope.somevalue1
else if(condition)
name = $scope.somevalue2
else
name = $scope.somevalue3

$scope.resultname = name;

if(condition)
weight = $scope.weightvalue1
else if(condition)
weight = $scope.somevalue2
else
weight = $scope.somevalue3

$scope.resultname = $scope.resultname+" is"+ weight;

if(condition)
mess= $scope.messvalue1
else if(condition)
mess = $scope.messvalue2
else
mess = $scope.messvalue3

$scope.resultname = $scope.resultname+" "+ mess

Answer

html

<span id="output"></span>
<section ng-app="myApp">
<article ng-controller="MyCtrl">
<p ng-bind-html="resultname"></p>
</article>
</section>

Controller

angular.module('controllers', []);
angular.module('myApp', ['controllers','ngSanitize']);    
angular.module('controllers').controller('MyCtrl', function ($scope){
$scope.resultname= 'Ram is <span class="myStyle">24</span>kg'
});

CSS

 .myStyle{
  color:red
 }

You will require ngSanatize js file

https://code.angularjs.org/1.2.1/angular-sanitize.min.js

Comments