CODEWITHSUNDEEP
angularjs
Alan
Alan

Reputation: 21

Table filter by predicate

I made a jsfiddle to show what is my problem. The fisrt part is working in a partial way. See line number 15. I put the predicate in the filter (predicate is l_name) by hand and is working. The table is filtered by Last Name column.

<tr ng-repeat="item in items | filter:{l_name:myInput}">

The second part of the sample is not working when I use the select (model named mySelect2) to choose the predicate where I'm going to filter (see line number 36).

What I'm trying to do is use the select to choose the column by predicate and the input to filter in that column.

<tr ng-repeat="item in items | filter:{mySelect2:myInput2}">

Am I missing something or the binding of the select (mySelect2) must update the filter on the table?

Thanks for the help!

PS: type jo in the input.

Upvotes: 2

Views: 4068

Answers (3)

Jason Goemaat
Jason Goemaat

Reputation: 29234

Here's a fiddle with some options: http://jsfiddle.net/jgoemat/tgKkD/1/

Option 1 - Search on multiple fields

You can use an object on your model ('search' here) as your filter and separate input boxes for l_name and f_name. This allows you not only to filter on either, but filter on both:

any: <input ng-model="search.$"/><br/>
l_name: <input ng-model="search.l_name"/><br/>
f_name: <input ng-model="search.f_name"/><br/>
<!-- skipping code -->
<tr ng-repeat="item in items|filter:search">

Option 2 - Use a function on your controller

The built-in filter can take a function as an argument that should return true if the object should be included. This function takes the object to be filtered as its only argument and returns true if it should be included. Html:

<tr ng-repeat="item in items|filter:filterFunc">

controller function:

$scope.filterFunc = function(obj) {
    // property not specified do we want to filter all instead of skipping filter?
    if (!$scope.mySelect)
        return obj;

    if (obj[$scope.mySelect].toLowerCase().indexOf($scope.myInput.toLowerCase()) >= 0)
        return obj;
    return false;
};

Option 3 - Create a custom filter

This filter function will take the whole list as an argument and return the filtered list. This does require you to create an angular module and specify it in the ng-app tag like ng-app="MyApp"Html:

<tr ng-repeat="item in items|MyFilter:mySelect:myInput">

Code:

var app = angular.module('MyApp', []);
app.filter('MyFilter', function() {
    return function(list, propertyName, value) {
        console.log('MyFilter(list, ', propertyName, ', ', value, ')');
        // property not specified do we want to filter all instead of skipping filter?
        if (!propertyName)
            return list;

        var newList = [];
        var lower = value.toLowerCase();
        angular.forEach(list, function(v) {
            if (v[propertyName].toLowerCase().indexOf(lower) >= 0)
                newList.push(v);
        });
        return newList;
    }
});

Option 4: ng-show

The built-in filter filter expressions don't let you use any expression, but ng-show does so you can just limit visible items like so:

<tr ng-show="item[mySelect].toLowerCase().indexOf(myInput.toLowerCase()) >= 0 || !mySelect" ng-repeat="item in items">

I think option 1 is easy and flexible. If you prefer your drop-down + field UI then I think option 3 is the most useful, and you can re-use it as a dependency in other apps like this:

var app = angular.module("NewApp", ["MyApp"]);

I would just name it something better like 'filterByNamedProperty'. Option 2 is easy but it is tied to your controller. Option 4 is messy and I wouldn't use it.

Upvotes: 4

Stewie
Stewie

Reputation: 60416

You may pass scope variables to your filters:

<tr ng-repeat="item in items | filter:myScopeVariable">

This means that you may define your filter object in controller and it will be used by the filter:

$scope.$watch('mySelect2', function(val){
  $scope.myScopeVariable = {};
  $scope.myScopeVariable[val] = $scope.myInput2;
});

$scope.$watch('myInput2', function(val){
  $scope.myScopeVariable = {};
  $scope.myScopeVariable[$scope.mySelect2] = $scope.myInput2;
});

Demo Fiddle

Upvotes: 0

Corey Cole
Corey Cole

Reputation: 987

What about using a custom filter? Users concatenate the property with the criteria (e.g. last:jo). In the filter, split on the colon, and use the first part as the property name and the second part as the criteria.

Upvotes: 0

Related Questions