J'essaie d'afficher certaines données à l'aide d'un J'ai commencé avec une idée, à mon avis, j'ai: p> 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.
.controller('TicketCtrl', function ($scope, $filter) {
$scope.toggleFilter = function (name) {
name = $filter('getSlice')(name);
alert(name);
}
});
3 Réponses :
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: p>
-View: p> -Controller: p> 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/ p> p>
Merci pour votre réponse! Avec l'utilisation de index code> 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 code> au
ng-répéter code>. 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.
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; } });
Je ne sais pas mais maintenant le filtre va être appliqué à Tous les éléments b> dans le NG-REPEAT code>. 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 code> chèque, donc merci pour ça!
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 p>
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!
Pouvez-vous préciser comment votre filtre est censé fonctionner? Actuellement, votre fonction
togglefilter code> ne fait rien ne fait quoi que ce soit utile, à l'exception de la réaffectation de la valeur de la variable CODE> Nom code> 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 code>.