Using scope values with filters

Question

I am in the need of a filter that filters the shown results within a table, using ngRepeat. I want to filter those results based on a user input.

At this point, i am doing things like this:

//HTML
<input type="search" ng-model="search">

<table>
  <tr ng-repeat="person in clients | filter: searchFilter">
    <td><input type="text" ng-model="person.Vorname"></td>            
  </tr>
</table>

The controller / Filter function:

app.controller('MyCtrl',function($scope){
  $scope.searchFilter = function (obj) {
    var re = new RegExp($scope.search, 'i');
    return !$scope.search || re.test(obj.Vorname) || re.test(obj.Firma);
  };
});

Everythings works just fine. However, i am unsure whether i am doing this the right way.

Should i move my filter function to an actual angular.filter for the sake of standards compliance?

If so, how should i pass the value from my input element to the filter? I am aware that i could pass the scope itself, but this seems somehow wrong / too dependent from the scope.

What is the way to go here?

"Writing your own filter is very easy: just register a new filter factory function with your module. Internally, this uses the filterProvider. This factory function should return a new filter function which takes the input value as the first argument. Any filter arguments are passed in as additional arguments to the filter function." -- docs.angularjs.org/guide/filter — elclanrs
– elclanrs, Commented Nov 14, 2013 at 7:29
@elclanrs While your comment was helpful, i'd like to point out that saif first argument will be the array used in the ngRepeat directive in this specific case. However, i figured out that i can pass in the searchterm as a second argument by using persondata:search — user2422960
– user2422960, Commented Nov 14, 2013 at 8:00

Maxim Shoustin · Accepted Answer · 2013-11-14 07:47:30Z

1

Should i move my filter function to an actual angular.filter for the sake of standards compliance?

Right, the better way to use filters as utility (like singletons as service, provider, factory).

The filter doesn't use $scope it creates output based on input, therefore you can write your filter like:

app.filter('myfilter', function() {
   return function( items, types) {
    var filtered = [];

    angular.forEach(items, function(item) {
       // <some conditions>
          filtered.push(item);  // dummy usage, returns the same object         
        }
    });

    return filtered;
  };
});

Took from Fiddle Demo

As reference

If you use codeigniter framework with angular seed, you can see that they use seprate file named:

filters.js      --> custom angular filters

And project structure looks like:

app/                --> all of the files to be used in production
  css/              --> css files
    app.css         --> default stylesheet
  img/              --> image files
  index.html        --> app layout file (the main html template file of the app)
  index-async.html  --> just like index.html, but loads js files asynchronously
  js/               --> javascript files
    app.js          --> application
    controllers.js  --> application controllers
    directives.js   --> application directives
    filters.js      --> custom angular filters
    services.js     --> custom angular services
  lib/              --> angular and 3rd party javascript libraries
    angular/
      angular.js        --> the latest angular js
      angular.min.js    --> the latest minified angular js
      angular-*.js      --> angular add-on modules
      version.txt       --> version number
  partials/             --> angular view partials (partial html templates)
    partial1.html
    partial2.html

edited Nov 14, 2013 at 7:47

answered Nov 14, 2013 at 7:42

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

3 Comments

Shivek Parmar Over a year ago

@maxim Shoustin: please see this question plnkr.co/edit/J0xCIP9d5boJzostGEv8?p=preview . and also read the comments in plunker html and js files

Maxim Shoustin Over a year ago

@ShivekParmar how does example refer to current question? please post the link of your question and where is a problem

Shivek Parmar Over a year ago

@MaximShoustin , apologies for that, Here is the link for question. stackoverflow.com/questions/26380841/…

Collectives™ on Stack Overflow

Using scope values with filters

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related