Filter results in angularjs based on select value

Question

This seems like it should be easy but I am new to angular and not grasping this concept very well. I am hoping to run an ng-repeat over a dataset and then be able to filter the results based on a selected option in a select box, using the exact same dataset.

I have created an array of options and assigned them to the variable $scope.OurTeamCategories.

angular.module('app', [])
.controller('Main', ['$scope', function($scope) {
   $scope.ourTeamCategories = [
        {"id":18,"title":'Management'},
        {"id":19,"title":'Administration'},
        {"id":21,"title":'Designers'},
        {"id":22,"title":'Accounts'},
    ]
}]);

Then in the HTML File I am dynamically create the select box using ng-options and use ng-repeat to create a list of these the categories. This all works fine, but now I want to be able to filter

<div ng-app="app">
  <div ng-controller="Main">
    <select name="show-filter"  ng-model="catFilter" ng-options="category.title for category in ourTeamCategories">
          <option value="{{category.id}}"></option>
      </select>

  <li ng-repeat="cat in ourTeamCategories">
      <h3>{{cat.title}}</h3>
      <!-- for testing -->
     <b>input: {{catFilter.id}}</b> - - ID: {{cat.id}}
  </li>
   </div>
</div>

I thought I would be able to run a filter in the following way, but I am getting an error. Can anyone tell me what I am doing wrong?

<li ng-repeat="cat in ourTeamCategories | filter {cat.id:catFilter.value}">

I've created a plunker here: http://plnkr.co/edit/YwHknAm3X2NUdxDeUjS8?p=preview

Pankaj Parkar · Accepted Answer · 2015-06-18 19:46:29Z

18

You need to mention direct id in your filer like id that will look up through ourTeamCategories id & for more accurate result do add true at the end will ensure the exact matching rather than contains & also missed colon :

<li ng-repeat="cat in ourTeamCategories | filter : {id: catFilter.id}: true">

Update

You are mixing up two approaches at the same time like ng-options with ng-repeat. I think you should stick with ng-options, so in your current ng-option which is setting title value in your ng-model

<select name="show-filter" ng-model="catFilter" 
   ng-options="category as category.title for category in ourTeamCategories">
</select>

Forked Plunkr here

edited Jun 18, 2015 at 19:46

answered Jun 18, 2015 at 17:50

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

7 Comments

Starfs Over a year ago

Thanks! I think both of yours and idursun's comments are valid and the error has gone away. However, it still doesn't seem to want to filter upon selecting the relevant select option.

Starfs Over a year ago

I'm actually getting the expected values into the select options with my current select code. The values being 18,19,21,22. When i apply your update, the select options values are now 0,1,2,3 which are not relevant to the filtering I'm trying to accomplish.

Pankaj Parkar Over a year ago

@Starfs Thats my bad..I missed couple of things.. now its obviously fixed..take a look at plunkr & code changes..

Pankaj Parkar Over a year ago

@Starfs thats depend on how you binding value in ng-options now I used filter : {id: catFilter.id} as catFilter contains whole selected object..did you looked at plunkr?

Pankaj Parkar Over a year ago

Let us continue this discussion in chat.

|

idursun · Accepted Answer · 2015-06-18 17:48:24Z

2

You need a colon after filter. Try this:

filter: {cat.id:catFilter.value}

answered Jun 18, 2015 at 17:48

idursun♦

6,3701 gold badge40 silver badges51 bronze badges

Collectives™ on Stack Overflow

Filter results in angularjs based on select value

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related