CODEWITHSUNDEEP
javascripthtmlangularjs
goutam
goutam

Reputation: 657

Change specific words of string to bold

I have a a single span element in my page. I am concatenating words to a single variable in AngularJS and then referencing the variable to the span element in the page.

$scope.abc = "Downstream";
$scope.abc.concat('<b>','Upstream',</b>);

When the page is viewed, it displays Downstream<b>Upstream</b>

How to display the word Upstream alone in Bold?

Upvotes: 0

Views: 1081

Answers (2)

Green
Green

Reputation: 5000

according to this https://docs.angularjs.org/api/ng/directive/ngBindHtml

You need to include the ngBindHtml and $sanitize service

In your js file, it should be

angular.module('App', ['ngSanitize'])
  .controller('Ctr', ['$scope', function($scope) {
     $scope.abc = "Downstream";
     $scope.abc2 = $scope.abc.concat('<b>','Upstream','</b>');
}]);

In your html file, it should be

<div ng-controller="Ctr">
    <p ng-bind-html="abc2"></p>
</div>

Upvotes: 1

Jacob van Lingen
Jacob van Lingen

Reputation: 9537

Seems a duplicate to angular variable generating html.

I don't know angular, but reading that post it's easy. Just do:

 $scope.abc = $scope.trustAsHtml($scope.abc);

HTML

<div data-ng-bind-html="abc "></div>

Also check your Angular version, for version 1.2 or lower you could use the ng-bind-html-unsafe binding.

<div class="post-content" ng-bind-html-unsafe="abc"></div>

This does not work anymore at Angular 1.2+ According to comment of TheSharpieOne:

"It has been replaced with Strict Contextual Escaping. See docs.angularjs.org/api/ng.$sce"

Upvotes: 1

Related Questions