Filtro AngularJS baseado em matriz de strings?
Estou tendo dificuldade para entender como fazer um filtro Angular para resolver um problema que estou enfrentando.
Aqui está um exemplo básico da minha estrutura de dados, uma variedade de tarefas:
var tasks = [
{ Title: "This is a task title",
Tags: ["Test","Tag","One","Two","Three"] },
{ Title: "Another test tag title",
Tags: ["Some", "More", "Tags"] },
{ Title: "One more, why not",
Tags: ["I","Like","Dirt"] },
{ Title: "Last one!",
Tags: ["You","Like","Dirt"] }
];
Portanto, cada objeto tem uma matriz de tags. Por uma questão de exemplo, digamos que estou exibindo cada um desses objetos como uma linha em uma tabela.
Depois que o controlador ng de páginas é inicializado, eu soupegando todas as tags de todas as tarefas (sem duplicatas) e montando-os em umtags
array.
Em seguida, estou exibindo essas tags como botões de alternância na página. Todos os botões são azuis por padrão, significando "ativo" (em outras palavras: mostre as tarefas com esta tag). Eu preciso ser capaz de clicar em um desses botões para "desativar" essa marca - que filtrará todas as linhas de tarefas na tabela em que a tarefa possui essa marca.
Da mesma forma para referência visual - gray = "ocultar tarefas cujas tags contenham essa tag", blue = "mostrar tarefas cujas tags contenham essa tag":
.
Ao clicar em um botão, ele fica cinza, filtrando todas as tarefas na tabela que possuem essa tag. Posso clicar nos botões novamente para alternar novamente a marca, mostrando novamente todas as tarefas com essa marca.
Estou explicando isso com clareza suficiente? É um sistema confuso.
Enfim, eu tentei o seguinte:
ng-filter="task in filteredWithTags = (tasks | filter: { tags: arrayOfTags }"
para nenhum proveito.
Alguém mente me apontando na direção certa? :)
PS: Eu tive isso trabalhando no início desta semana chamando umfilterByTag(tag)
função no meu controlador. Isso percorreria todas as tarefas da matriz de tarefas e, se tivesse a tag correspondente, ocultaria essa tarefa. similarmentereativando uma tag faria a mesma coisa, percorreria todo mundo e executaria a mágica ... mas me disseram que meu método era lento + exagero, porque "os filtros angulares podem lidar com tudo isso para você, e será melhor - prática ". Por isso, por que estou aqui, tentando descobrir como deixar o Angular fazer o trabalho para mim :)
Qualquer ajuda é apreciada!