AngularJS: modify value within ng-repeat

Question

I have a simple table in Angular:

<table>
    <tr ng-repeat="row in $data">
        <td>{{row.name}}</td>
        <td>{{row.surname}}</td>
    </tr>
</table>

that would render something like this:

<table>
    <tr>
        <td>Johnathan</td>
        <td>Smith</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Doe</td>
    </tr>
</table>

but I have a dynamic search function that reloads the table and I need to highlight the search string in results like so (the search word is "John"):

<table>
    <tr>
        <td><span class="red">John</span>athan</td>
        <td>Smith</td>
    </tr>
</table>

now I hoped that something like this would work:

<table>
    <tr ng-repeat="row in $data">
        <td>{{myFunction(row.name)}}</td>
        <td>{{row.surname}}</td>
    </tr>
</table>

but it doesn't. Any way to make this work?

UPDATE: Solved, solution proposed by @loan works in this case.

You should use a filter. See example http://stackoverflow.com/questions/15519713/highlighting-a-filtered-result-in-angularjs — Ioan, Feb 05 '15 at 14:47
use a custom filter -> and bind-html-unsafe (i use something like this `` — Raphael Müller, Feb 05 '15 at 14:48

Raphael Müller · Accepted Answer · 2015-02-05T15:34:20.870

As you'll see in the example below, you can do something similar to this.

Example

In your existing loop you can add the custom filter as follows:

<body ng-controller="TestController">
  <h1>Hello Plunker!</h1>
  <input type="text" ng-model="query" />

  <ul>
    <li ng-repeat="item in data | filter:query">
      <!-- use the custom filter to highlight your queried data -->
      <span ng-bind-html="item.name | highlight:query"></span>
    </li>
  </ul>
</body>

In your JavaScript file you can create the custom filter:

(function() {
  'use strict';

  angular.module("app", []);

  //to produce trusted html you should inject the $sce service
  angular.module("app").filter('highlight', ['$sce', function($sce) {

    function escapeRegexp(queryToEscape) {
      return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
    }

    return function(matchItem, query) {
      return $sce.trustAsHtml(query ? ('' + matchItem).replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem);
    };
  }]);

  angular.module("app")
    .controller('TestController', ['$scope',
      function($scope) {

        $scope.query = ""; //your scope variable that holds the query

        //the dummy data source
        $scope.data = [{
          name: "foo"
        },{
          name: "bar"
        },
        {
          name: "foo bar"
        }];
      }
    ]);

})();

if you want you can replace the html in the filter with your values:

<strong>$&</strong>

to

<span class="red">$&</span>

score 0 · Answer 2 · answered Feb 05 '15 at 15:03

0

use ng-class, so the html for your td becomes

<td ng-class = "{red: row.name == searchStr}">{{row.name}}</td>

There are other formats for ng-class and my html may be dodgy I use haml mostly but check the docs on ng-class

answered Feb 05 '15 at 15:03

RoyTheBoy

648
1
6
15

I don't need to highlight the whole value, just a search string in it. – Caballero Feb 05 '15 at 15:10
@Cabellero .then you probably need $sce.trustAsHtml(html_code), https://docs.angularjs.org/api/ng/service/$sce. I was looking at your example Johnathan when i answered. – RoyTheBoy Feb 05 '15 at 15:16

score 0 · Answer 3 · answered Feb 05 '15 at 15:24

You can use angular-ui's highlight module. You can simply use it like this:

DEMO

HTML

    <div>
      <input type="text" ng-model="searchText" placeholder="Enter search text" />
    </div>
    <input type="checkbox" ng-model="caseSensitive" /> Case Sensitive?

      <table>
      <tbody>
        <tr ng-repeat="row in $data">
          <td ng-bind-html="row.name | highlight:searchText:caseSensitive"></td>
          <td>{{row.surname}}</td>
        </tr>
      </tbody>
    </table>

You can download it via bower, instructions are provided in their github page.

Note: Add angular's ngSanitize to avoid an $sce unsafe error.

AngularJS: modify value within ng-repeat

3 Answers3

Linked