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>