2

Gostaria de verificar uma forma de adicionar filtros a uma tabela de registros (ng-repeat) através de um array e não somente de um texto.

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

Obs.: Estou utilizando o $filter para filtrar dados no ng-repeat e não filtros como o uppercase por exemplo.


Segue o resultado obtido com a resposta do colega:

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

2
  • 1
    Você quer filtrar pelo que por exemplo? Por exemplo todos que tiverem a cor in ['red', 'blue']?
    – Sorack
    Commented 5/11/2016 às 0:14
  • Exatamente Sorack.
    – Shura16
    Commented 6/11/2016 às 12:07

1 Resposta 1

3

Use um filtro customizado.

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

O parâmetro é o objeto contido no array que está sendo testado e o filtro é a relação de strings que podem ser utilizados.

EDIT 1

Se fossem várias cores no item ao invés do filtro ficaria assim:

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

$scope.filtrarCores = function(item){
        return item.cores.filter(function filtrar(cor) {
                 return filtro.indexOf(cor.nome) !== -1;
               }).length > 0;
};
5
  • Como seria pegar um subitem ali dentro? Se o item tivesse várias cores, cada cor com um código e nome.
    – Shura16
    Commented 6/11/2016 às 12:32
  • 1
    Podem ser uma ou mais cores, para este caso.
    – Shura16
    Commented 6/11/2016 às 21:46
  • Não consegui fazer o mesmo funcionar :-(
    – Shura16
    Commented 10/11/2016 às 23:35
  • A questão é que não consegui fazer funcionar. A ideia é a mesma.
    – Shura16
    Commented 14/11/2016 às 15:53
  • 1
    Agradeço ao colega Sorack, consegui resolver!
    – Shura16
    Commented 16/11/2016 às 17:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .