Setting angular filter :true not working

Question

I pull 2 pieces of data from database. Each is returned in the form of an array of JSON objects, stored in angular $scope variables, and look like this:

$scope.data =
[{ code: 1, text: cat },
 { code: 2, text: dog },
 { code: 10, text: cow }]

$scope.data2 = 
[{ code1: 1, code2: F1, text: meow},
 { code1: 2, code2: F2, text: woof},
 { code1: 3, code2: F10, text: moo}]

$scope.data to be precise is an array of 11 objects where the code: field for each object is 1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12. $scope.data2 is an array of 100s of objects where the code2: field can be F1, F2, F3, F4, F5, F6, F7, F8, F10, F11, F12.

I then have two html <select> elements that are both populated by these two arrays and look like the following:

Option 1<select data-ng-model="dataCode" data-ng-options="a.code as a.text for a in data"></select>
Option 2<select data-ng-model="data2Code" data-ng-options="a.code1 as a.text for a in data2 
| filter: { code2: 'F' + dataCode }"></select>

The functionality I'm trying to achieve is that, when you select an item from $scope.data, it filters what items are displayed in $scope.data2 based on the code. This logic works, however this only filters by substring. i.e. If you select cat, which has code 1, the filter will return meow as well as moo because moo's code is F10 and F1 is a substring of F10.

I want to filter by exact match. So I searched stackoverflow and found a couple other questions of people asking the same thing. The accepted answer was mostly the same on all of them: append the :true comparator to the filter. However, when I tried that and changed it to filter: { code2: 'F' + dataCode } : true, the filter matches 0 results and I get an empty <select> dropdown with no choices. Setting it to false or just removing the comparator fixes the issue, but then it's not an exact match anymore.

I've tried switching to using <option> elements instead of ngOptions but to no avail. I thought maybe it has to do with me mixing a string with a number ('F' + dataCode) in the filter so I tried using dataCode.toString() but that didn't work either. Can anyone figure out what I'm doing wrong or help me create a custom filter if this can't be fixed?

Its working for me plnkr.co/edit/9FjFAyvC1wTQ2hRaUzNr?p=preview . What angular version are you using? I also noticed that you don't have quotes in your code2 and text property values in your data — PrinceG
– PrinceG, Commented Jan 6, 2016 at 23:11

Sina Gh · Accepted Answer · 2016-01-06 20:26:10Z

1

If you think the problem is with your filter, then based on the docs, instead of using true, write a comparator function and do your own loose comparing. If that does not result in your expected behavior, then your problem lies somewhere else, which cannot be addressed without a functional example of your code.

answered Jan 6, 2016 at 20:26

Sina Gh

5983 silver badges8 bronze badges

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

2 Comments

bscott Over a year ago

This wasn't the actual solution to my problem but I'm marking it as the answer because it helped me realize what I was doing wrong. After attempting to write my own comparator function, I noticed nothing was being passed in to the arguments. That's when I went back to my <select> elements and realized I made a very fundamental angular mistake: I never bound my <select> to a model. In my question, I wrote data-ng-model="data2Code", but in my actual source code, I don't have a model. Very elementary mistake.

Sina Gh Over a year ago

Glad I could help :)

Collectives™ on Stack Overflow

Setting angular filter :true not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related