Change specific words of string to bold

Question

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?

http://stackoverflow.com/questions/9381926/insert-html-into-view-using-angularjs — sss, Sep 11 '14 at 07:44

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

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"

edited May 23 '17 at 11:57

Community

1
1

answered Sep 11 '14 at 07:30

Jacob van Lingen

8,989
7
48
78

ns-sanitize also has to be included. Thanks for the answer! – goutam Sep 11 '14 at 08:49

score 1 · Accepted Answer · answered Sep 11 '14 at 07:45

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>

Change specific words of string to bold

2 Answers2