Angular JS - Apply Javascript filtering logic to Angular Filter

Question

This question comes from this one

In Javascript, I have this code in order to make a filtering, so that I can show the elements from the array colors just when they also appear as a value in cars

var colors = ["blue","red","pink","yellow"];

var cars = [{"brand":"Ford","color":"blue"}
           ,{"brand":"Ferrari","color":"red"}
           ,{"brand":"Rolls","color":"blue"}];

var filteredColors = colors.filter(function(color) { 
    return cars.some(function(car) { 
        return car.color === color;
    }); 
});

console.log(filteredColors);

I have tried to apply this in Angular JS, doing this:

$scope.colors =["blue","red","pink","yellow"];

$scope.cars=[ {"brand":"Ford","color":"blue"}
           ,{"brand":"Ferrari","color":"red"}
           ,{"brand":"Rolls","color":"blue"}];

$scope.filteredColors = function() {
    var colorsvar = $scope.colors;
    var carsvar = $scope.cars;
    return colorsvar.filter(function(color) { 
        return carsvar.some(function(car) { 
            return car.color === color;
        });
    });

};

And then in the view:

<ul>
    <li ng-repeat="n in colors | filter: filteredColors"> {{n}}
    </li>
</ul>

The result should be

blue

red

But it doesn't happen to filter properly. See working plunkr here Any help will be welcome, thanks!

Sajeetharan · Accepted Answer · 2018-01-05 18:01:35Z

1

You can use custom filter as below, check the DEMO

DEMO

var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.colors =["blue","red","pink","yellow"];

$scope.cars=[ {"brand":"Ford","color":"blue"}
           ,{"brand":"Ferrari","color":"red"}
           ,{"brand":"Rolls","color":"blue"}];

 
})
app.filter('myFilter', function() {
    // the filter takes an additional input filterIDs
    return function( filterColors, inputArray) {
        var filtered = [];
       angular.forEach(inputArray,function(key,value){
             if(filterColors.includes(key.color) && !filtered.includes(key.color)) {
                filtered.push(key.color);
             }
       })
       return filtered;
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="n in colors | myFilter: cars  track by $index"> {{n}}
    </li>
</ul>
</div>

edited Jan 5, 2018 at 18:01

answered Jan 5, 2018 at 16:59

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Joe82 Over a year ago

Sorry, I had a typo in the question, the ng-repeat should be "n in colors", and it should yield as the result "blue" and "red" (no "blue", "red", "blue")

user8518202 Over a year ago

Good Explination

Sachila Ranawaka · Accepted Answer · 2018-01-05 16:04:54Z

1

No need to call a filter. just call the function inside the ng-repeat

 <li ng-repeat="n in filteredColors()"> {{n}}
 </li>

Demo

var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.colors =["blue","red","pink","yellow"];

$scope.cars=[ {"brand":"Ford","color":"blue"}
           ,{"brand":"Ferrari","color":"red"}
           ,{"brand":"Rolls","color":"blue"}];

$scope.filteredColors = function() {
    var colorsvar = $scope.colors;
    var carsvar = $scope.cars;
    return colorsvar.filter(function(color) { 
        return carsvar.some(function(car) { 
            return car.color === color;
        });
    });

};
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="n in filteredColors()"> {{n}}
    </li>
</ul>
</div>

answered Jan 5, 2018 at 16:04

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

2 Comments

Joe82 Over a year ago

Is there it any way to apply it as a filter? (I think I need that approach for my app) If not I will mark it as correct anyway. Thanks!

Sachila Ranawaka Over a year ago

check this scotch.io/tutorials/building-custom-angularjs-filters

Collectives™ on Stack Overflow

Angular JS - Apply Javascript filtering logic to Angular Filter

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related