Search code examples
javascriptangularjsselectfilterng-options

angular filter:{v:0} does not filter anything. Other values work properly


For some reason this simply does not filter anything.

Here is the selection:

<select
    ng-model="s.id"
    ng-options="c.v as c.name for c in oarray | filter:{v:0}"
>
</select>

This is structure:

$scope.oarray = [{ name:"(select)", v:0 },{ name:"name1", v:100 },{ name:"name2", v:200 }];

The select box lists all elements: "(select)", "name1", and "name2" even though filter says to return only "(select)" for it is the only one with the member v==0.

If I change filter to v:100 it will filter the stuff properly.

Why?! If this is a 'feature' or a 'side effect' then what would be the workaround without changing already predefined values?

Thank you in advance.

PS: Here is your playground: http://plnkr.co/edit/huRPv08A4bucJmcG60Fe?p=preview


Solution

  • Your filter is searching for all objects where the value for v CONTAINS 0, not where it equals 0.

    You need to send :true to the filter to tell it to do a strict comparison, eg

    ng-options="c.v as c.name for c in oarray | filter:{v:0}:true"
    

    The second parameter here is the comparator, an optional parameter that defaults to false. The Angular documentation for filter contains the following information about this parameter:

    Comparator which is used in determining if values retrieved using expression (when it is not a function) should be considered a match based on the the expected value (from the filter expression) and actual value (from the object in the array).

    Can be one of:

    function(actual, expected): The function will be given the object value and the predicate value to compare and should return true if both values should be considered equal.

    true: A shorthand for function(actual, expected) { return angular.equals(actual, expected)}. This is essentially strict comparison of expected and actual.

    false: A short hand for a function which will look for a substring match in a case insensitive way. Primitive values are converted to strings. Objects are not compared against primitives, unless they have a custom toString method (e.g. Date objects).

    Defaults to false.