Angularjs Filter with Argument Array

Question

Angularjs Filter with Argument Array

Asked 7 years, 8 months ago

Viewed 3,906 times

2

I would like to check a way to add filters to a table of records (ng-repeat) through an array and not just text.

https://plnkr.co/edit/FRaceRkO4uBSyfZYay6e?p=info

Note: I am using $filter to filter data in ng-repeat and not filters like uppercase for example.

Follows the result obtained with the answer of the colleague:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body ng-app="myApp">

<div ng-controller="myController">
    <h2>Lista de Itens</h2>
    
    <input type="text" ng-model="itemFiltro" /><button ng-click="adicionarFiltro()">+</button>
    
    <p></p>
    
    {{ filtro }} <button ng-click="limparFiltro()">Limpar</button>
    
    <p></p>
    
 	<ul ng-repeat="item in itens | filter: filtrarCores">
        <li>{{ item.nome }}</li>
        <ul ng-repeat="cor in item.cores">
            <li>{{ cor.id }}</li>
            <li>{{ cor.nome }}</li>
        </ul>
    </ul>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>

<script>
    angular.module("myApp", []);
    
    angular.module("myApp")
    .controller("myController", ["$scope", function($scope) {
    
        $scope.itemFiltro = "";
        
        $scope.filtro = [];
        
        $scope.adicionarFiltro = function() {
            $scope.filtro.push($scope.itemFiltro);
            $scope.itemFiltro = "";
        }
        
        $scope.limparFiltro = function() {
            $scope.filtro = [];
            $scope.itemFiltro = "";
        }
    
        $scope.itens = [
            {
                nome: "Item 1",
                cores: [
                    {
                        id: 1,
                        nome: "Azul"
                    }, {
                        id: 2,
                        nome: "Verde"
                    }, {
                        id: 3,
                        nome: "Amarelo"
                    }
               ]
               
            }, {
                nome: "Item 2",
                cores: [
                    {
                        id: 1,
                        nome: "Azul"
                    }, {
                        id: 4,
                        nome: "Vermelho"
                    }, {
                        id: 5,
                        nome: "Branco"
                    }
                ]
            }, {
                nome: "Item 3",
                cores: [
                    {
                        id: 5,
                        nome: "Branco"
                    }, {
                        id: 6,
                        nome: "Preto"
                    }, {
                        id: 7,
                        nome: "Roxo"
                    }
                ]
            } 
        ];

        $scope.filtrarCores = function(item){
            return item.cores.filter(function filtrar(cor) {
                return $scope.filtro.indexOf(cor.nome) !== -1;
            }).length > 0;
        };
    
    }]);
</script>
</body>
</html>

1

You want to filter by what for example? For example everyone who has the color in ['red', 'blue']?

– Sorack

2016/11/05 at 00:14
Exactly Sorack.

– Shura16

2016/11/06 at 12:07

1 answer

Browser other questions tagged angularjs filter ng-repeat

You are not signed in. Login or sign up in order to post.

by Sorack • **27,430** points · Answer 1 · 2016-11-05T01:18:24+00:00

Use a custom filter.

View

<ul ng-repeat="item in itens | filter: filtrarCores">
    <li>{{item.nome}}</li>
    <li>{{item.cor}}</li>
</ul>

Controller

var filtro = ['vermelho', 'laranja'];

$scope.filtrarCores = function(item){
    return filtro.indexOf(item.cor) !== -1;
};

The parameter is the object contained in the array being tested and the filter is the list of strings that can be used.

EDIT 1

If there were multiple colors in the item instead of the filter it would look like this:

var filtro = ['vermelho', 'laranja'];

$scope.filtrarCores = function(item){
        return item.cores.filter(function filtrar(cor) {
                 return filtro.indexOf(cor.nome) !== -1;
               }).length > 0;
};