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

Noonan

Answer 1

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

Pardue

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. – Noonan

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. – Noonan

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

@Noonan 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? – Pardue

Let us continue this discussion in chat. – Pardue

Any one knows what is the reference webpage that talking about the trailing true in filter of ng-repeat in abov example ?? It seems that Angular JS has many hidden properties, methods, parameters, etc...... – Propriety

@Propriety you can find it here, It is a comparator function property, the shorthand value for function(actual, expected) { return angular.equals(actual, expected)} is true. – Pardue

Answer 2

You need a colon after filter. Try this:

filter: {cat.id:catFilter.value}

Melyndamem