将字符串中的特定单词更改为粗体

Question

I have aa 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?

Answer 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 "

Answer 2

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>