CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-scope
notAChance
notAChance

Reputation: 1430

AngularJS: Display part of an expression in bold

My aim is to make part of an angular expression bold.

So basically I'm taking an object obj, and converting it to a string str.

obj = $scope.gridOptions1.api.getFilterModel();
     for (var propt in obj) {
         str += (" " + propt + ': ' + obj[propt]);
     }

I then need to find a particular word within that object, for example "Depot". I'm doing this using str.indexOf("Depot"). I set this to a variable d:

for (i = 0; i < str.length; i++) {
             var d = str.indexOf("Depot");
}

I then replace the ORIGINAL "Depot" with a BOLD "Depot":

if (d !== -1 ) {
             var depot = str.substring(d, d + 5);
             finalString = str.replace(depot, depot.bold());
         }

Then I fire my string onto the scope:

$scope.getFiltered = finalString;

the .bold() method is simply returning the string with the bold tags around "Depot" in my UI.

So I'm taking it that the string isn't considered HTML, is there another way to do this?

Upvotes: 3

Views: 7694

Answers (6)

Miguel Rubio
Miguel Rubio

Reputation: 81

What I did to achieve this was to pass my sting and first check if the word I want to change is there, if not I'll just pass the string as it is. Once I know the word is there I just replace the word for the same one in bold. 

 $scope.makeBold = function(item) {
        if(item.indexOf("LookForMe") != -1)
        {
            b = "LookForMe";
            var d = item.replace(b,b.bold());
            return '<div>'+d+'</div>';
        }
        else {
            return '<div>'+item+'</div>';
        }
    };

My controller looks like this: 

var app = angular.module('myApp', ['ngSanitize'],function(){});

In the HTML:

<div ng-bind-html="makeBold(stringToChange)"></div>

Upvotes: 1

Anand G
Anand G

Reputation: 3200

I would have tried it this way,

var myApp = angular.module('myApp',[]);

myApp.directive('wrapInTag', function() {
	return {
        restrict: 'A',
        link: function(scope, elm, attr) {
          var tag = attr.tag || 'strong';
          var words = eval(attr.words) || [];
          var text = scope.myText;
          
           for(var i=0; i< words.length; i++) {
              text =  text.replace(words[i],'<'+tag+'>'+words[i]+'</'+tag+'>');
            }             
            elm.html(text);
        }
    }
});

 myApp.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.myText = 'Hello, Here you will find your word in bold';
    $scope.words = ['Hello','your','bold'];
 }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<bod ng-app="myApp">

<div ng-controller="MyCtrl">
    <div wrap-in-tag words="{{words}}">{{myText}}! </div>
</div>
  </body>

See it working at http://codepen.io/anon/pen/YyNdbO

Upvotes: 2

Abhilash Augustine
Abhilash Augustine

Reputation: 4208

I have achieved this with the help of my custom filter.

I can share my approach. Either you can use this code or use the logic.

$scope.data = [
                { value: "1", bold: false },
                { value: "2", bold: false },
                { value: "3", bold: false },
                { value: "4", bold: false },
                { value: "5", bold: false },
                { value: "6", bold: false }
            ];

this is my data. Actually I want to display and search in 1,2,3,4 etc. For that I have added one more property to each value, bold.

And this is my html for the same,

<input type="text" ng-model="search" />
<p ng-repeat="a in data | myFilter : search">
    <b ng-show="a.bold"> {{a.value}} </b>
    <span ng-hide="a.bold">{{a.value}}</span>
</p>

And here is my custom filter,

app.filter("myFilter", function () {
    return function (input, search) {
        angular.forEach(input, function (value, index) {
            if ( value.value == search) {
                value.bold = true;
            }
            else
            {
                value.bold = false;
            }
        });
        return input;
    };
});

Hope this will be really help you.

Happy codding. :)

Upvotes: 0

Daniele Sassoli
Daniele Sassoli

Reputation: 898

from this answer

you will need to tell angular to treat the result as html. In order to do this, you need to include ngSanitize as a module dependency and insert the result with ng-bind-html.

So the html will look like 

 <p ng-bind-html="htmlString"></p>

and the angular part

angular.module('app', ['ngSanitize'])

Upvotes: 4

Vinod
Vinod

Reputation: 549

Use ng-bind-html to render the string as html content. In your case, use below on the HTML page:

<p ng-bind-html="getFiltered"></p>

Upvotes: 3

michelem
michelem

Reputation: 14590

You should use $sce service:

JS:

$scope.getFiltered = '<strong>render me as HTML</strong>';
$scope.trustedHtml = $sce.trustAsHtml($scope.getFiltered);

HTML:

{{trustedHtml}}

Upvotes: 0

Related Questions