Angular FilterJS with Array of Arguments

Question

Angular FilterJS with Array of Arguments

Navigation

#1 by (2 votes)

2

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

link

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

The following is the result of your colleague's response:

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

angularjs ng-repeat filter

asked by anonymous 05.11.2016 / 00:59

1 answer

bootstrapValidator.js with jsf does not work AngularJS - modal inserts template with radiobutton options

score 2 · Accepted Answer

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