How to use filter in AngularJS properly to highlight a word in all JSON?

Question

how to use filter function properly in angularjs to highlight a word that i type in textbox and then it highlight all word in JSON that we type. I have dimensional array JSON, which is looked like this :

    [

{

    "id": "WEB1500001",
    "tgl_opj": "2015-08-24",
    "ket": "",
    "tgl_jth_tempo": "2015-09-07",
    "divisi": "MIYAKO         ",
    "soDetail": 

[

{

    "id": "WEB1500001",
    "kd_brg": "KAS1618B                      ",
    "harga": ​216900,
    "qty": ​500,
    "qty_si": ​170

},
{

    "id": "WEB1500001",
    "kd_brg": "KAS1627KB                     ",
    "harga": ​257900,
    "qty": ​300,
    "qty_si": ​0

},
{

    "id": "WEB1500001",
    "kd_brg": "MCM-612                       ",
    "harga": ​206400,
    "qty": ​400,
    "qty_si": ​300

},
{

    "id": "WEB1500001",
    "kd_brg": "MCM-507                       ",
    "harga": ​228500,
    "qty": ​400,
    "qty_si": ​400

},
{

    "id": "WEB1500001",
    "kd_brg": "WD-189H                       ",
    "harga": ​157900,
    "qty": ​1050,
    "qty_si": ​300

},
{

    "id": "WEB1500001",
    "kd_brg": "WD-290HC                      ",
    "harga": ​303200,
    "qty": ​200,
    "qty_si": ​0

},
{

    "id": "WEB1500001",
    "kd_brg": "MCM-509                       ",
    "harga": ​228500,
    "qty": ​200,
    "qty_si": ​100

},
{

    "id": "WEB1500001",
    "kd_brg": "MCM-838                       ",
    "harga": ​243200,
    "qty": ​200,
    "qty_si": ​0

},
{

    "id": "WEB1500001",
    "kd_brg": "BL-101PL                      ",
    "harga": ​236000,
    "qty": ​240,
    "qty_si": ​0

},
{

    "id": "WEB1500001",
    "kd_brg": "BL-151GF                      ",
    "harga": ​298000,
    "qty": ​240,
    "qty_si": ​240

},
{

    "id": "WEB1500001",
    "kd_brg": "MCG-171                       ",
    "harga": ​954800,
    "qty": ​50,
    "qty_si": ​20

},

            {
                "id": "WEB1500001",
                "kd_brg": "MJG-201                       ",
                "harga": ​870600,
                "qty": ​50,
                "qty_si": ​0
            }
        ]
    }

]

here is how i consume the json, this is my app.js :

var app = angular.module('myApp', ['ngAnimate', 'ui.router', 'ui.bootstrap'])

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/Laporan_PO_OutStanding');

    $stateProvider


        .state('Laporan_PO_OutStanding', {
            url: '/Laporan_PO_OutStanding',
            templateUrl: 'pooutstanding/main',
            controller : 'Hello'
        })

        .state('Laporan_PO_OutStanding.Laporan_PO_OutStanding_PartialDetails', {
            templateUrl: 'pooutstanding/details',
        });

});

app.controller('Hello', function($scope, $http, $state, $stateParams, $log) {
    $("#navigationArea").hide();
    $scope.isCollapsed = false;
    $scope.tgl_awal = '2015-08-01';
    $scope.tgl_akhir = '2015-08-31';
    $scope.kd_dealer;
    $scope.state = $state;
    $scope.stateParams = $stateParams;

    $scope.show = function show(){
        $("#tbl").show(500);
        $("#dateArea").show(500);
        $("#navigationArea").hide(500);
    }

    $scope.selectPOoutStanding = function selectPOoutStanding(tgl_awal,tgl_akhir,kd_dealer){
        $log.debug(tgl_awal);
        $log.debug(kd_dealer);
        $log.debug("hehe");
        $http.get(urlLaporan + "/"+tgl_awal+"/"+tgl_akhir + "/" + kd_dealer)
        .success(function(response){
            $scope.listPOoutStandings = response;
        });
    };


});

app.filter('highlight', function($sce) {
    return function(text, phrase) {
        if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
          '<span class="highlighted">$1</span>')

        return $sce.trustAsHtml(text)
      }
    });

and here is my index.html :

<div class="table-responsive">
<table id="tbl" class="table">
    <thead>
        <tr>
            <th></th>
            <th>No PO</th>
            <th>Tanggal PO</th>
            <th>Tanggal Jatuh Tempo</th>
            <th>Divisi</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat-start="listPOoutStanding in listPOoutStandings | filter:search | orderBy:'id'" ng-bind-html="listPOoutStanding | highlight:search">
            <td><a ui-sref=".Laporan_PO_OutStanding_PartialDetails" ng-click="selectSingleID(listPOoutStanding.id)" class="btn btn-info">Show Detail</a></td>
            <td><a ng-click="isCollapsed = !isCollapsed" class="expandcollapse btn btn-mini btn-primary pull-center"><span class="glyphicon glyphicon-plus"></span>&nbsp;{{listPOoutStanding.id}}</a></td>
            <td>{{listPOoutStanding.tgl_opj}}</td>
            <td>{{listPOoutStanding.tgl_jth_tempo}}</td>
            <td>{{listPOoutStanding.divisi}}</td>

        </tr>
        <tr ng-repeat-end="">
        <td colspan="10" style="padding: 0">
          <div collapse="isCollapsed">
            <table class="table table-border">
                <tr>
                    <td>No. PO</td>
                    <td>Kode Barang</td>
                    <td>Qty</td>
                    <td>Qty SI</td>
                    <td>Harga</td>
                </tr> 
                <tr ng-repeat="details in listPOoutStanding.soDetail">
                    <td>{{ details.id }}</td>
                    <td>{{ details.kd_brg }}</td>
                    <td>{{ details.qty }}</td>
                    <td>{{ details.qty_si }}</td>
                    <td>{{ details.harga }}</td>
                </tr>
            </table>             
          </div>
        </td>
        </tr>
    </tbody>
</table>

Here is how i do css the highlighted text, i give it yellow color :

.highlighted { background: yellow }

it won't highlited the text, it just filter the JSON data record, but it wont highlight the text, what i missed here?

Answer 1

You have to use ng-class and write expression to return true when the row text matches the textbox input.

<tr ng-repeat="employee in employeeList" ng-class="{match:empfind.length>0 &&employee.Name.toLowerCase().indexOf(empfind.toLowerCase())>=0}">

Here is an example which will highlight the table row based on the given input. http://dotnetlearners.com/blogs/view/242/Highlight-matched-table-rows-based-on-entered-text-in-a-textbox-using-angularjs.aspx

Answer 2

filter removes data from html. Instead of it use ng-class like:

<tr ng-repeat-start="listPOoutStanding in listPOoutStandings | orderBy:'id'" 
    ng-class="{'highlighted': listPOoutStanding.text == search}">
    <td>your tds</td>
</tr>