CODEWITHSUNDEEP
javascriptangularjsfilter
GRowing
GRowing

Reputation: 4717

Angularjs - Filter does not filter one column but filters others

I have never used filters extensively in angularjs and I just saw a problem with one of my projects..

The filter that I apply to a table is filtering all columns except for the one that multiplies the values of two items in the repeater.

1. Is this meant to work this way?

2. Is there a way to filter the column that multiplies numbers or adds strings together?

Here is the plunker with a working (not working) example http://plnkr.co/edit/pmCjQL39BWWowIAgj9hP?p=preview

I have a filter that I apply to ng-repeater...

<input type="text" ng-model="tableSearch">

And then in table..

<tr ng-repeat="items in tableData | filter:tableSearch">
<td> {{ items.qty }} </td>
<td> {{ items.price }} </td>

// hm.....
<td> {{ items.qty*items.price }} </td>

</tr>

Update

Thanks to guidance from @Chandermani below I resolved the issue writing a custom filter. Here is the updated plunk: http://plnkr.co/edit/pmCjQL39BWWowIAgj9hP?p=preview

    $scope.tableFilter = function(item) {
        for (key in item) {
            var m = item[key].toString();
            var s = (item.qty * item.price).toString();
            if( 
                s.indexOf($scope.tableSearch) != -1 ||
                m.indexOf($scope.tableSearch) != -1 ||
                $scope.tableSearch == undefined
            ){
                return true;
            };
        }
        return false;
    }

Then filter is used like this:

<tr ng-repeat="items in tableData | filter:tableFilter">

Upvotes: 0

Views: 1126

Answers (1)

Chandermani
Chandermani

Reputation: 42659

Filter work on model data, in your case this data

 {
        "id": 1,
        "name": "Apples",
        "price": 19.99,
        "qty": 1
    },
    {
        "id": 2,
        "name": "Oranges",
        "price": 29.99,
        "qty": 1
    },

The last column has been generated in html. You would have to write a custom filter function for supporting that or add the last column value also to your model.

For custom filter function you can do something like 

$scope.tableFilter=function(item) {
    //should return true for the item to show up.
}

see documentation for filter http://docs.angularjs.org/api/ng/filter/filter

Upvotes: 1

Related Questions