Angular custom filtering by condition in HTML doesn't work

Question

I'm pretty new in angular, so my question may looks simple or stupid, but I didn't found any solution. I have a collection in my controller (for example, a collection of integers) and I want to filter it and take items for which condition is true.

At first I tried this:

<div>{{myCollection.find(item => item === 2)}}</div>

and it didn't work. Then I found another approach (which one I don't like because I will always have only single element to show and there is no need in peretition):

<div ng-repeat="item in list | filter:{item === 2}">
    <div>{{item}}</div>
</div>

And it also doesn't work. Here is JSBin with my efforts: http://jsbin.com/govovocace/1/edit?html,js,output

Is there any possible solution of my problem? Calculating the required field in controller and passing it to the view doesn't suit me (unfortunately).

Answer 1

You had syntactical mistake. You should not be mentioning any object inside filter as you're directly filtering actual object which you are looping on. The last option true is because we are going to perform exact check.

HTML

<div ng-repeat="item in list | filter: 2: true">
    <div>{{item}}</div>
</div>

Demo Plunkr

Answer 2

You can define a filter function in your controller like so:

$scope.filterFn = function(val){
    return val === 2;
};

And then use it in your template like so:

<div ng-repeat="item in list | filter:filterFn">
    <div>{{item}}</div>
</div>

Tha said, this is equivalent to just filtering the array to begin with, so i'm not sure if this meets your needs or not. If you have a particular use case this doesn't suit let me know in the comments.

Answer 3

i would have done something like this

.controller('SomeController',function($scope){

 // get the list from somewhere
  $scope.list  = [] // some array for instance

  $scope.dataList = list.filter(function(i){
     return i.someVal==list.someVal; // condition that satisfy your req
  });

});

and now use it in view as

<div ng-repeat=" item in dataList"> 
   {{item}}
</div>

if your condition will return only one result then you can do

$scope.dataList = list.filter(function(i){
         return i.someVal==list.someVal; // condition that satisfy your req
      })[0];