Filtro AngularJS baseado em array de strings?

Question

Estou tendo dificuldade em 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 série 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 possui uma matriz de tags.Por exemplo, digamos que eu esteja exibindo cada um desses objetos como uma linha em uma tabela.

Depois que as páginas ng-controller forem inicializadas, estou pegando todas as tags de todas as tarefas (sem duplicatas) e reunindo-os em um tags variedade.

Em seguida, estou exibindo essas tags como botões alternáveis ​​na página.Todos os botões são azuis por padrão, significando "ativos" (em outras palavras:mostrar tarefas com esta tag contida nela).Preciso poder clicar em um desses botões para "desativar" essa tag - o que filtrará todas as linhas de tarefas na tabela em que a tarefa possui essa tag.

Da mesma forma para referência visual -- grey = "ocultar tarefas cujas tags contenham esta tag", blue = "mostrar tarefas cujas tags contenham esta tag":

.

Clicar em um botão o torna cinza, filtrando todas as tarefas da tabela que possuem essa tag.Posso então clicar nos botões novamente para ativar essa tag novamente, mostrando novamente todas as tarefas com essa tag.

Estou explicando isso com clareza suficiente?É um sistema confuso.

De qualquer forma, tentei o seguinte:

ng-filter="task in filteredWithTags = (tasks | filter: { tags: arrayOfTags }" para nenhum proveito.

Alguém se importa em me indicar a direção certa?:)

PS: Eu fiz isso funcionar no início desta semana, ligando para um filterByTag(tag) função no meu controlador.Isso percorreria todas as tarefas na matriz de tarefas e, se tivesse a tag correspondente, ocultaria essa tarefa.De forma similar reativando uma tag faria a mesma coisa, passaria por todos e faria a mágica...mas me disseram que meu método era lento + exagero, porque "filtros angulares podem lidar com tudo isso para você e será mais uma prática recomendada".É por isso que estou aqui, tentando descobrir como deixar o Angular fazer o trabalho para mim :)

Qualquer ajuda é apreciada!

Answer 1

Você poderia escrever um costume filtro.O filtro receberia a lista de tags ativas, tags, e a variedade de tarefas a serem filtradas, tasks, e geraria uma série de tags filtradas.Será praticamente igual ao que você já fez, mas sem nenhuma função extra no osciloscópio.

angular.module('myApp').filter('selectedTags', function() {
    return function(tasks, tags) {
        return tasks.filter(function(task) {

            for (var i in task.Tags) {
                if (tags.indexOf(task.Tags[i]) != -1) {
                    return true;
                }
            }
            return false;

        });
    };
});

Então você pode usá-lo como

<ul>
    <li ng-repeat="task in tasks | selectedTags:tags"></li>
</ul>

Veja isso violino.