Angular-filter by select value

Question

I have an application where I want to filter a long list of products based on value from "select" containing product types. The filter works, but only after I select something. It initially sets the "Show All" option, but filters out everything. If I select something else, it works, and if I re-select "Show All" it works. But why doesn't the filter work initially?

The model (looks something like this):

$scope.products = {[
    {name: 'productA',Type: 1},
    {name: 'productB',Type: 1},
    {name: 'productC',Type: 2},
    {name: 'productD',Type: 2},
]};

$scope.productTypes = {[
    {Name: 'typeAlpha',Type: 1},
    {Name: 'typeBravo',Type: 2},
]};

The HTML:

<select id="productFilter" data-ng-model="productFilter">
    <option value="" selected="selected">Show all</option>
    <option data-ng-repeat="type in productTypes" value="{{type.Type}}">{{type.Name}}</option>          
</select>
<p data-ng-repeat="product in products | filter:{Type:productFilter} ">{{product.Name}}</p>

What is that supposed to mean $scope.products = {[...]}; ? It should be either array $scope.products = [{...}, ...]; or object $scope.products = {}; This example is not working. — Slava N.
– Slava N., Commented Mar 11, 2016 at 10:28

Community · Accepted Answer · 2017-05-23 12:23:45Z

2

I recommend using ng-options instead of ng-repeat over the options:

<select id="productFilter" ng-model="productFilter" 
  data-ng-options="type.type as type.name for type in productTypes">
    <option value selected="selected">Show all</option>
</select>
<p data-ng-repeat="product in products | filter:(!!productFilter || undefined) && {type: productFilter}">
    {{product.name}}
</p>

For "show all", the filter must return undefined (ng-repeat filter "show all" items if no filter selected)

Also removed the {..} around the array and better use lower case for properties:

  $scope.products = [
    {name: 'productA', type: 1},
    {name: 'productB', type: 1},
    {name: 'productC', type: 2},
    {name: 'productD', type: 2}
  ];

  $scope.productTypes = [
    {name: 'typeAlpha', type: 1},
    {name: 'typeBravo', type: 2}
  ];

Here is a jsbin (based on Hiskinds) http://jsbin.com/yepaqikodo/1/edit?html,js,output

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Mar 11, 2016 at 10:47

FelixMelix

2481 silver badge8 bronze badges

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

Comments

idmitme · Accepted Answer · 2016-03-11 10:36:02Z

0

This is a working example based on code above: http://jsbin.com/buzafisuko/edit?html,js,output

The Slava.N's comment is correct and you should not wrap productTypes and product in {}

Also, JavaScript is a case-sensitive language, product.Name is always undefined, you should use product.name in your HTML instead.

answered Mar 11, 2016 at 10:36

idmitme

9297 silver badges13 bronze badges

Comments

Hassan Tariq · Accepted Answer · 2016-03-11 10:39:21Z

0

Use product.Type instead ofType inside 2nd ng-repeat filter

answered Mar 11, 2016 at 10:39

Hassan Tariq

7407 silver badges15 bronze badges

2 Comments

Andreas Skagestad Over a year ago

Hm... that seems to always filter out everything

Hassan Tariq Over a year ago

what it is doing exactly?

viral · Accepted Answer · 2016-03-11 11:25:32Z

0

you set $scope.productFilter = ''. so its return by default value blank at filter.

answered Mar 11, 2016 at 11:25

viral

33 bronze badges

Collectives™ on Stack Overflow

Angular-filter by select value

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related