AngularJS filtre basé sur le tableau de chaînes de caractères?

Je vais avoir un moment difficile de l'emballage de ma tête autour de la façon de faire un filtre Angulaire de résoudre un problème que je suis en cours d'exécution dans.

Voici un exemple de base de ma structure de données, un tableau de tâches:

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

De sorte que chaque objet a un tableau de balises. Pour l'amour d'exemple, nous allons dire que je suis sortie de chacun de ces objets comme une ligne dans une table.

Une fois les pages ng-controller est initialisé, je suis récupérer tous les tags de toutes les tâches (sans doublons) et de les assembler dans un tags tableau.

Ensuite, je suis sortie de ces balises, comme bascule-mesure sur les boutons de la page. Tous les boutons sont bleu par défaut, ce qui signifie "actif" (en d'autres termes: afficher les tâches avec cette étiquette de contenu). J'ai besoin d'être en mesure de cliquer sur l'un de ces boutons pour "désactiver" ce tag -- qui permettra de filtrer les tâches de lignes de la table dans laquelle la tâche a cette balise.

Comme pour référence visuelle -- gris = "masquer les tâches dont les balises contenant ce tag" bleu = "afficher les tâches dont les balises contiennent cette balise":

AngularJS filtre basé sur le tableau de chaînes de caractères?.

En cliquant sur un bouton transforme le gris, le filtrage de toutes les tâches de la table qui ont cette balise. Je peux ensuite cliquer sur le bouton à nouveau pour activer cette étiquette sur le dos, re-montrant toutes les tâches avec cette balise.

Suis-je expliquer cela assez clairement? C'est une source de confusion système.

De toute façon, j'ai essayé le suivant:

ng-filter="task in filteredWithTags = (tasks | filter: { tags: arrayOfTags }" en vain.

Quelqu'un esprit de me pointer dans la bonne direction? 🙂

PS: j'ai eu ce travail plus tôt cette semaine par l'appel d'une filterByTag(tag) fonction dans mon contrôleur. Ce serait de la boucle de chaque tâche dans le tableau des tâches et si elle avait l'étiquette qui correspond, il serait cacher cette tâche. De même de ré-activer une balise ferait la même chose, en boucle par le biais de tout le monde et de travailler à la magie... mais je me suis dit que ma méthode était lent + exagéré, parce que "angulaire des filtres peut gérer tout cela pour vous, et il sera plus mieux practicy". C'est pourquoi je suis ici, à essayer de comprendre comment laisser Angulaire faire le travail pour moi 🙂

Toute aide est très appréciée!

OriginalL'auteur | 2014-02-25

  1. 25

    Vous pourriez écrire un personnalisé filtre. Le filtre serait donné la liste des marqueurs actifs, tags, et le tableau des tâches pour être filtré, tasks, et serait sortie d'un tableau de filtré les balises. Il sera le même que ce que vous avez déjà fait, mais avec pas de fonction supplémentaire sur le champ.

    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;

        });
    };
});

    Alors vous pouvez l'utiliser comme

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

    Découvrez ce violon.

    Réponse solide couvrant le concept, mais je pense que pour être un peu plus précis à ce que la question veut il serait de rejeter toutes les Tâches contenant une balise dans la liste des balises qui ne sont pas sélectionnés dans l'interface. Par opposition à l'acceptation de Tâches contenant une balise dans une liste de mots qui sont sélectionnés dans l'interface.
    Je ne suis pas complètement sûr de ce que tu veux dire. Entendez-vous la "liste de mots" doit être rejeté/désactivé balises, plutôt que d'accepter/activé tags?
    Oui, c'est ce qu'il semblait être la question est de demander. Citant " j'ai besoin d'être en mesure de cliquer sur l'un de ces boutons pour "désactiver" ce tag -- qui permettra de filtrer les tâches de lignes de la table dans laquelle la tâche a cette balise.'
    Je comprends votre point, mais je pense que la question est ambiguë sur ce point. "Tous les boutons sont bleu par défaut, ce qui signifie "actif" (en d'autres termes: afficher les tâches avec cette étiquette de contenu).' Si une tâche doit avoir toutes ses balises activé pour être montré n'est pas clair, si je ne suis pas oublié quelque chose?
    Je pense que vous avez raison. Relisant, la langue en question est en contradiction avec lui-même donc, soit l'interprétation est possible. 'Comme pour référence visuelle -- gris = "masquer les tâches dont les balises contenant ce tag" bleu = "afficher les tâches dont les balises contenant ce tag": "En fait de l'interprétation que vous avez est plus dans le bon sens de toute façon.

    OriginalL'auteur Mikke