angularjs custom filter on ng-class

Question

Hello I want to create simple search table of data. I want to highlight if data matched user type input. I done it by doc below since I'm starting using angular i wonder is there any better way? Some custom filter maybe ?

    <!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app="myApp">
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <style type="text/css">
      table td{
        padding: 5px;
      }
      .true{
        color: green;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div ng-controller="filtrController">
      <div>{{search}}<hr/></div>
      <input type="text" ng-model="search"/>
      <table>
        <thead>
          <tr>
            <td>Name:</td>
            <td>Param1:</td>
            <td>Param2:</td>
         </tr>
        </thead>
        <tbody>
          <tr ng-repeat="foo in data | filter:search">
            <!--<td ng-class="{true:'true',false:''}[search === foo.Name]">{{foo.Name}}</td>-->
            <td ng-class="customFilter(search,foo.Name)">{{foo.Name}}</td>
            <td ng-class="customFilter(search,foo.param1)">{{foo.param1}}</td>
            <td ng-class="customFilter(search,foo.param2)">{{foo.param2}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <script type="text/javascript">
        var myApp = angular.module('myApp',[]);
        myApp.controller('filtrController',function ($scope)
        {
          $scope.customFilter = function(search,searchTo)
          {
            if(search != '')
            {
              if(searchTo.indexOf(search) > -1) return 'true';
              return '';
            }
          };
          $scope.data =
                  [
                    {
                      Name:'name foo1',
                      param1:'param of foo1',
                      param2:'param 2 of foo1'
                    },
                    {
                      Name:'name foo2',
                      param1:'param of foo2',
                      param2:'param 2 of foo2'
                    },
                    {
                      Name:'name sfoo3',
                      param1:'param of foo3',
                      param2:'param 2 of foo3'
                    },
                  ]
        });


    </script>
  </body>

Sergey Moiseev · Accepted Answer · 2014-06-24 20:23:16Z

1

You just need to custom filter like this:

$scope.customFilter = function(data, searchFor) {
  if (angular.isUndefined(data) || angular.isUndefined(searchFor)) return data;
  angular.forEach(data, function(item) {
    if(angular.equals(item, searchFor)) item.highlighted = true;
  });
  return data;
}

and html like this

<tr ng-repeat="foo in data | customFilter:{something:1}" ng-class="{highlighted: foo.highlighted}">

Update:

So, I just need to explain my approach in more details. You have data some of which is needed to be highlighted. So you need to set new property in your data and highlight it (using css and ng-class) if property set to true. For setting this property you can create custom filter that takes your data array, changes it internal state by setting this property and return this array as result. This is what I implemented for you.

Update#2

Same behaviour as ng-filter needed. So here it is.

edited Jun 24, 2014 at 20:23

answered Jun 23, 2014 at 18:15

Sergey Moiseev

2,9532 gold badges26 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

user2217288 Over a year ago

is that filter ? or just a function ? I try doing my own filter still i dont know how to do it any help ? var myAppFilters = angular.module('myAppFilters',[]) .filter('customFilter',function() { return function(input,search) { ......... return input; }; }) ;

Sergey Moiseev Over a year ago

Same story with custom filter. Move my code there and it'll be available not only in this controller, but app wide. Still same story. Still I'll fix one probable mistake.

user2217288 Over a year ago

I will try thx. Still I run my own filter the point is to change a bit code matched element. I can console.log the result but i don't know how to pass it into array can you help in that ? code is on next comment...

user2217288 Over a year ago

[code]angular.module('highModule',[]) .filter('high',function() { returnfunction(input,dataSearch) { varfiltered=[]; angular.forEach(input,function(input) { varres=[]; res=angular.forEach(input,function(input) { //console.log(input); if(input.indexOf(dataSearch)>-1) { console.log('<span>'+input+'</span>'); } }) //console.log(res); filtered.push(res); }); returnfiltered; } });[/code]

Sergey Moiseev Over a year ago

Please read my answer one more time. I'll update it to you right away.

|

Collectives™ on Stack Overflow

angularjs custom filter on ng-class

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related