How to pass input values as arguments into the custom filter in Angularjs

Question

I want to pass two argument to the custom filter 'from' and 'to' into the custom filter I have created in my controller.

Here you can see my custom filter I have created:

    vm.filterMinutes = function (prop, from, to) {
        return function (item) {
            return item[prop] >= from && item[prop] <= to;
        };
    };

And the view looks like this:

<label>Search from: <input ng-model="fromMinutes"></label>
<label>Search from: <input ng-model="toMinutes"></label>

    <tr style="cursor: pointer;" ng-repeat="student in AdminReportsWorksnaps.data | filter: AdminReportsWorksnaps.filterMinutes('totalMinutes', fromMinutes,toMinutes)">
                <td>{{ student.studentId }}</td>
                <td>{{ student.firstName }}</td>
                <td>{{ student.lastName }}</td>
                <td>{{ student.municipality }}</td>
                <td class="total success">{{ student.totalMinutes | number}}</td>
   </tr>

For some reason this is not working. Well, If I Call filter like this: filter: AdminReportsWorksnaps.filterMinutes('totalMinutes', 5000,6000)" it works perfectly fine.. I just cant see how can I pass the input values from the textboxs.

Thanks

Pankaj Parkar · Accepted Answer · 2016-04-21 21:25:05Z

1

Pass it as : separated (Assuming you are using controllerAs pattern with vm alias)

ng-repeat="student in AdminReportsWorksnaps.data | filter: AdminReportsWorksnaps.filterMinutes: 'totalMinutes': fromMinutes: toMinutes"

So in above case you need to expect 4 parameter in a filter, 1st parameter would be AdminReportsWorksnaps.data, 2nd would be totalMinutes, 3rd fromMinutes & last would be toMinutes value

vm.filterMinutes = function (collection, prop, from, to) {
    //collection would have 
    console.log("AdminReportsWorksnaps.data", collection)
    console.log(prop, from, to);
    return (collection || []).filter(function (item) {
        return item[prop] >= from && item[prop] <= to;
    });
};

edited Apr 21, 2016 at 21:25

answered Apr 21, 2016 at 20:33

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

5 Comments

Pankaj Parkar Over a year ago

@HisniFazlija is your controller alias is AdminReportsWorksnaps?

Lulzim Fazlija Over a year ago

yes and I tried with AdminReportsWorksnaps too but still does not seem like working

Lulzim Fazlija Over a year ago

so I tried this: ng-repeat="student in AdminReportsWorksnaps.data | filter: AdminReportsWorksnaps.filterMinutes: 'totalMinutes': fromMinutes: toMinutes"

Lulzim Fazlija Over a year ago

it prints the collection, and I can see the consoles updating. but the table is not filtering yet...

Lulzim Fazlija Over a year ago

Now I get this error: VM19414:27 TypeError: collection.filter is not a function

lithium · Accepted Answer · 2016-04-21 22:32:03Z

It look like you're using a controllerAs, so why don't use the controller alias for the models too :

<label>Search from: <input ng-model="AdminReportsWorksnaps.fromMinutes"></label>
<label>Search from: <input ng-model="AdminReportsWorksnaps.toMinutes"></label>

<tr style="cursor: pointer;" ng-repeat="student in AdminReportsWorksnaps.data | filter: AdminReportsWorksnaps.filterMinutes('totalMinutes', AdminReportsWorksnaps.fromMinutes, AdminReportsWorksnaps.toMinutes)">
    <td>{{ student.studentId }}</td>
    <td>{{ student.firstName }}</td>
    <td>{{ student.lastName }}</td>
    <td>{{ student.municipality }}</td>
    <td class="total success">{{ student.totalMinutes | number}}</td>

It should works like that.

Collectives™ on Stack Overflow

How to pass input values as arguments into the custom filter in Angularjs

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related