CODEWITHSUNDEEP
javascriptangularjs
Michael
Michael

Reputation: 7377

AngularJS bolding statements in search box

I'm new to AngularJS and am wondering how to bold statements that I'm searching for in the page. I'm using the filter method to filter a table, but I'd like to bold the filtered statements as well. For example, if I'm searching for 

test

I'd like the following to be bolded:

this is a <b>test</b>
etc

Here's my controller code:

function PhoneListCtrl($scope, $http) {
  $http.get('/text.json').success(function(data){
      $scope.phones = data;
  });

  $scope.hello = "Hello, World";
  $scope.orderProp = 'age';
  $scope.query = "";
  //$scope.query

  $scope.smart_filter = function(item){
      item = item.snippet;
      var query_words = $scope.query.split(" ");

      return query_words.every(function(word){return item.indexOf(word) != -1})
  };

  $scope.test = function(item){
      return "<b>" + item + "</b>";
  }

Upvotes: 0

Views: 153

Answers (2)

Brian Genisio
Brian Genisio

Reputation: 48127

If I understand you correctly, you want to "unsafe bind" your text:

<span ng-html-bind-unsafe="textWithMarkup"></span>

Upvotes: 1

Michael Benford
Michael Benford

Reputation: 14104

Take a look at the Highlight module of Angular UI-Utils. It does precisely what you want.

Upvotes: 1

Related Questions