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 stackoverflow.com/questions/15519713/… — Ioan
– Ioan, Commented Feb 5, 2015 at 14:47
use a custom filter -> and bind-html-unsafe (i use something like this <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span> — Raphael Müller
– Raphael Müller, Commented Feb 5, 2015 at 14:48

Raphael Müller · Accepted Answer · 2015-02-05 15:34:20Z

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>

RoyTheBoy · Accepted Answer · 2015-02-05 15:03:26Z

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 5, 2015 at 15:03

RoyTheBoy

6581 gold badge6 silver badges15 bronze badges

2 Comments

Caballero Over a year ago

I don't need to highlight the whole value, just a search string in it.

RoyTheBoy Over a year ago

@Cabellero .then you probably need $sce.trustAsHtml(html_code), docs.angularjs.org/api/ng/service/$sce. I was looking at your example <td><span class="red">John</span>athan</td> when i answered.

ryeballar · Accepted Answer · 2015-02-05 15:24:12Z

0

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.

answered Feb 5, 2015 at 15:24

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

Collectives™ on Stack Overflow

AngularJS: modify value within ng-repeat

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related