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
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