6
votes

Filtre à bascule angulaire dans la répétition NG

J'essaie d'afficher certaines données à l'aide d'un ng-répéter code>. Je veux avoir un filtre sur les données affichées et lorsque je clique sur un élément spécifique, le filtre doit être supprimé. Lorsque je clique à nouveau sur cet élément spécifique, le filtre doit être ajouté à nouveau.

J'ai commencé avec une idée, à mon avis, j'ai: p> xxx pré> dans mon Contrôleur: P>

.controller('TicketCtrl', function ($scope, $filter) {
    $scope.toggleFilter = function (name) {
        name = $filter('getSlice')(name);
        alert(name);
    }
});   


2 commentaires

Pouvez-vous préciser comment votre filtre est censé fonctionner? Actuellement, votre fonction togglefilter ne fait rien ne fait quoi que ce soit utile, à l'exception de la réaffectation de la valeur de la variable Nom en tant que paramètre.


@djskinner Mon filtre prend simplement une entrée et des tranches qui entrent pour donner une sortie avec 20 caractères maximum et ajoute «...» à la fin. Le filtre fonctionne lorsque j'affiche nom .


3 Réponses :


0
votes

Ce n'est pas la mise à jour dans la vue, Beacause en $ Scope.Togglefilter Vous modifiez une variable locale non liée à la vue, dans cette liste angulaire est liée à votre variable de votre portée.Tickets afin que vous puissiez modifier la variable de liaison directement à Consultez vos modifications dans la vue, vous pouvez y aller à l'aide de la variable d'Itérateur $ Index disponible lorsque vous utilisez NGREPeat https://docs.angularjs.org/api/ng/directive/ngrepeat

Le résultat devrait être quelque chose comme ceci:

-View: xxx

-Controller: xxx

PS Off Topic: Je vois que vous utilisez un cadre ionique, si vous allez utiliser NG-REPEAT dans des appareils mobiles, les performances vont être bien meilleures si vous utilisez la directive de la récupération de la collection, les appareils mobiles ne peuvent pas Effectuez un lisse lorsque vous faites défiler les longues listes d'éléments avec NG-REPEAT car la liaison de 2 voies d'angulaire. http://ionicframework.com/docs/api/directive/collectionRepeat/


2 commentaires

Merci pour votre réponse! Avec l'utilisation de index je pourrais le faire fonctionner. Pour basculer, j'ai enregistré les données d'origine dans un tableau et j'ai également une matrice pour vérifier si l'élément spécifique doit obtenir le filtre true ou faux. Oh et moi avons dû ajouter piste par $ index au ng-répéter . EDIT: Aussi merci pour la pointe de la collecte-répéter. Mais je n'utilise en fait pas de grosses quantités d'articles dans mes listes, je pense que 10 articles maximum ou par liste. Est-ce toujours bénéfique alors?


Heureux que cela ait aidé, dans les anciens appareils, vous remarquerez de faire défiler un peu plus de loisirs. Mais chez les nouveaux appareils, vous ne remarquerez certainement pas la différence.



0
votes

Gardez-le simple et créez une enveloppe:

HTML: P>

angular.module('app',[]).
controller('ctrl', function($scope){
    $scope.data = [1,2,3,4,5,6,7,8,9,10];
    $scope.shouldRunFilter = false;

    $scope.myFilter = function(item){
        if($scope.shouldRunFilter)
        {
            return item > 5;
        }

        return item;
    }

    $scope.toggleFilter = function(){
        $scope.shouldRunFilter = !$scope.shouldRunFilter;
    }
});


1 commentaires

Je ne sais pas mais maintenant le filtre va être appliqué à Tous les éléments dans le NG-REPEAT . Je veux seulement cela pour des articles spécifiques. Je travaille sur une solution en utilisant l'idée de Javier Abrego. Quoi qu'il en soit, j'ai utilisé votre drunfilter chèque, donc merci pour ça!



2
votes

Vous voudriez garder une trace de l'état de la ligne (cliquée ou non cliquée sur). Idéalement, vous ne souhaitez pas modifier le nom de la propriété portée.

Le code suivant doit fonctionner pour vous xxx


1 commentaires

Oui, c'est une belle solution et était aussi ma solution initiale. Seul le problème que j'ai eu avec ceci était que sur certains appareils plus anciens, vous avez vu des divs des DIV pour une milaçonde ou donc au même moment, c'est ce que je voulais empêcher. Merci quand même!