CODEWITHSUNDEEP
javascriptangularjs
TietjeDK
TietjeDK

Reputation: 1207

Angular $filter on single field

I'm trying to filter on specific fields by using $filter in my controller which is inside a $watch function, but I can't seem to make sense of the official docs.

The case: I have a dropdown list I use as the filter parameter. I want to filter on a specific field in my array $scope.images. This field is called Vessel. When a option is selected on the drop down list the $watch function should filter the array.

The code that i have right now filter on all fields rather than on one specific.

Angular Code:

$scope.$watch('search', function(val)
{ 
    $scope.images = $filter('filter')($scope.items2, val);
}

View

<div ng-app="masterApp" ng-controller="listCtrl">
 <div class="container">  
    <label for="singleSelect"> Select Vessel: </label><br>

    <select name="singleSelect" ng-model="search">
        <option value="African Chaser">African Chaser</option>
        <option value="African Sprinter">African Sprinter</option>
    </select>

    <h3 class="text-center">Time: {{images[slider.value].Created | date:'medium'}}</h3>

    <img src="https://intra.monjasa.com/{{images[slider.value].File.ServerRelativeUrl}}" class="feed_image">

    <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options"></rzslider>
 </div>
</div>

What I have tried:

    $scope.$watch('search', function(val)
{ 
    $scope.images = $filter('filter: Vessel')($scope.items2, val);
}

The above doesn't work.

Any suggestions to where I am going wrong?

Upvotes: 0

Views: 98

Answers (2)

Shailendra Singh Deol
Shailendra Singh Deol

Reputation: 637

Hope this will help you -

 $scope.images = $filter('filter')($scope.items2,{Vessel : $scope.search},true);

Upvotes: 1

Amit Sirohiya
Amit Sirohiya

Reputation: 333

Try this -

Attach ng-changed event on your dropdown -

<select name="singleSelect" ng-model="search" ng-changed="filterItems()">
        <option value="African Chaser">African Chaser</option>
        <option value="African Sprinter">African Sprinter</option>
    </select>

In your controller define a function filterItems like this

$scope.filterItems = function(){
   // Filter code here
   $scope.images = $filter('filter')($scope.items2,{"vessel" : $scope.search});
}

vessel is the property in $scope.items2 on which you wants to filter.

Hope it helps you.

Upvotes: 0

Related Questions