Javascript Girl
  1. Javascript Girl
  3. Filtrer un tableau angular.js basé sur la portée
Intereting Posts
Comment trouver des auditeurs d'événements sur un nœud DOM en utilisant JavaScript Comment ouvrir une fenêtre modal Bootstrap en utilisant jQuery? Quel est l'effet du démarrage d'une URL avec "//", et la suppression de "http:" Comment supprimer le clignotement sur le nœud persistant de l'arbre de jqgrid peuplé à distance Pourquoi n'y a-t-il pas implicitement cela dans JavaScript Cette chaîne simple est-elle considérée comme une JSON valide? Mettre en surbrillance une expression de document html dans Asp.net mvc en utilisant JavaScript Dans Angularjs, comment puis-je utiliser ng-repeat, ng-model et ng-click pour modifier dynamiquement le contenu? Plusieurs fichiers javascript / css: meilleures pratiques? Objets multiples dans webgl Opérateurs de comparaison multiples dans une expression booléenne JavaScript Quelle est la meilleure pratique pour inclure les fichiers js / css dans un cadre d'application d'entreprise? Quelle est la différence entre le langage compilé et l'interprétation? Déclenchez une entrée de fichier pour ouvrir via javascript Afficher les options de Hide select en fonction de la liste déroulante précédente de Jquery ou de Javascript

Filtrer un tableau angular.js basé sur la portée

J'ai un groupe angular.js de 3 produits et un curseur de plage qui compte de 0 - 20 avec une étape de 1 . Je dois le faire, car je glisse le curseur de la gamme, il va filtrer mon tableau et afficher uniquement les produits avec la propriété de hauteur qui correspond à cette catégorie.

C'est-à-dire: filtrer 0 à 10 affichera n'importe quoi avec une hauteur de 0, 1, 2, 3, 5, 6, 7, 8, 9, 10 .

Ceci n'est pas nécessaire pour ma question, mais s'il était possible d'ajouter des inches à la fin de la valeur, j'apprécierais également cette aide.

Mon html est juste un curseur de gamme de base mis en place: 

 <body ng-controller="MainCtrl" style="min-height: 600px" > <div style="background-color: #808080;margin-left: 50px;margin-right: 50px; padding: 30px;"> <pre>{{ priceSlider | json }}</pre> <rzslider rz-slider-floor="priceSlider.floor" rz-slider-ceil="priceSlider.ceil" rz-slider-model="priceSlider.min" rz-slider-high="priceSlider.max" rz-slider-step="{{priceSlider.step}}"></rzslider> <div class="info" ng-repeat="p in products"> {{p.name}} {{p.height}} </div> </div> </body>

Mon App.js // application 

 var app = angular.module('plunker', ['rzModule']); app.controller('MainCtrl', function($scope) { $scope.priceSlider = { min: 0, max: 20, ceil: 20, floor: 0, step: 1 }; $scope.products = [ { name: 'one', height: '00' }, { name: 'two', height: '10' }, { name: 'three', height: '20' } ]; });

Puisque je dois appeler des sources externes et avoir une tonne de css dans ce domaine, voici un lien Codepen

J'ai essayé de résoudre cela pendant des jours et je commence à me questionner si c'est possible même! D'avance, merci pour votre aide!

Ajoutez la fonction suivante à votre contrôleur: 

  $scope.minFilter = function (p) { return p.height >= $scope.priceSlider.min; }; $scope.maxFilter = function (p) { return p.height <= $scope.priceSlider.max; };

Ensuite, utilisez ces filtres dans votre ng-repeat: 

 <div class="info" ng-repeat="p in products | filter:minFilter | filter:maxFilter ">

Voir: http://codepen.io/anon/pen/GgYzze

Vous devez écrire votre propre filtre AngularJS afin de le réaliser.

Dans votre Javascript 

 app.filter('onlyProductsWithinHeights', function(){ return function(products, minHeight, maxHeight){ var filtered = []; angular.forEach(products, function(product){ if(product.height >= minHeight && product.height <= maxHeight) filtered.push(product); }); return filtered; }; };

Dans votre balisage 

 <div class="info" ng-repeat="p in products | onlyProductsWithinHeights:priceSlider.min:priceSlider.max"> {{p.name}} {{p.height}} </div>