Filtrage ng-repeat liste à l'aide des cases à cocher et AngularJS

J'ai beaucoup lu d'autres posts sur ce point et ils ont tous tendance à décrire de manière unique compliqué de trouver des solutions. Je veux juste de filtrer une liste d'éléments basés sur les cases à cocher je clique (j'ai besoin d'un " ET " Filtre & être en mesure de voir tous les éléments d'abord jusqu'à une case à cocher est cliqué).

Cela semble comme il devrait être un morceau de gâteau avec AngularJS, Mais je suis tout simplement pas l'obtenir. comment puis-je modifier mon code pour faire le travail de filtrage?

Voici mon incomplète JSFiddle: http://jsfiddle.net/mromrell/qx3cD/1/

Mis à jour le Violon ici: http://jsfiddle.net/mromrell/qx3cD/7/

Vous en remercie d'Avance!

<div ng-controller="MyCtrl">
<li class="no-decoration" ng-repeat="tech in technologyArray">
    <label>
        <input type="checkbox" ng-model="strict" />{{tech}}</label>
</li>
<hr>
<div ng-repeat="portfolioItem in portfolioArray | filter:strict" class="ng-scope">
     <h3>{{portfolioItem.name}}</h3>

</div>

var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.technologyArray = ["HTML", "CSS", "Django", "Python", "AngularJS", "Javascript", "3rd party Payment API", "3rd party Libraries", "Jquery", "RestfulAPI", "AAAAAHH", "NodeJS", "Mongo", "Express", "Jade", "Wordpress", "MySQL", "Joomla", "Magento", "Jira"]
$scope.portfolioArray = [{
"id": "1",
"name": "Storm Pig",
"technology": ["HTML", "CSS", "Django", "Python", "AngularJS", "Javascript", "3rd party Payment API", "3rd party Libraries"]
}, {
"id": "2",
"name": "Placer",
"technology": ["HTML", "CSS", "Django", "Python", "AngularJS", "Javascript", "Jquery"]
}, {
"id": "3",
"name": "Custom Proposal App",
"technology": ["RestfulAPI", "AAAAAHH", "AngularJS", "HTML", "CSS", "Javascript", "NodeJS", "Mongo", "Express", "Jade"]
}, {
"id": "4",
"name": "21 Zero",
"technology": ["HTML", "CSS", "Wordpress", "MySQL"]
}, {
"id": "5",
"name": "Detour Journal",
"technology": ["HTML", "CSS", "Joomla", "MySQL"]
}, {
"id": "6",
"name": "Dex Custom Websites",
"technology": ["HTML", "CSS", "Wordpress", "MySQL", "Magento", "Jira"]
}, {
"id": "7",
"name": "Conversion Jump",
"technology": ["HTML", "CSS", "Joomla", "MySQL"]
}, {
"id": "8",
"name": "The Canyons Pass",
"technology": ["HTML", "CSS", "Joomla", "MySQL"]
}]

}

OriginalL'auteur Michael Romrell | 2014-02-11

10

Je pense que j'ai résolu d'une manière assez simple: http://jsfiddle.net/qx3cD/4/

Le problème que vous rencontrez est que des cases à cocher de travail sur une valeur true/false système, tandis qu'une base de filtre est à la recherche de match de données. Si vous avez besoin de créer une sorte de filtre personnalisé à la carte à la case états de la donnée elle-même. J'ai utilisé cette fonction de base, qui compare simplement case états à leur nom, et s'ils sont associés à la technologie de la liste.
```
$scope.myFunc = function(a) {
for(tech in $scope.technologyArray){
var t = $scope.technologyArray[tech];
if(t.on && a.technology.indexOf(t.name) > -1){
return true;   
}               
}
};
```
EDIT: mise à Jour

J'ai mis à jour le violon ici: http://jsfiddle.net/qx3cD/9/

Essentiellement deux choses ont été faites. La première est que les cases étaient regardés avec ng-change, de sorte que tous les résultats ont été affichés lorsque aucune des cases ont été sélectionnés. La deuxième est que la fonction de filtre a été mis à jour pour afficher uniquement les articles qui contiennent tous des technologies sélectionnées.

C'est les fonctions de Grand. Ma seule question serait, comment puis-je obtenir pour afficher tous les éléments d'abord jusqu'à une case à cocher est cliqué. Et d'agir comme un " ET " Filtre (donc si les trois technologies sont cliqué puis il affiche uniquement les éléments qui ont tous les trois de ces technologies)? J'ai mis à jour mon violon en fonction de vos suggestions ici: jsfiddle.net/mromrell/qx3cD/7
C'est Parfait! C'est exactement ce que j'espérais à faire, et ça parfaitement logique. Je pense que vous venez de créer le plus simple exemple de ce que j'ai vu sur 10+ d'autres exemples que j'ai regardé. Merci!!!!!
J'ai vérifié la solution proposée sur jsfiddle. il me donne "ReferenceError: t n'est pas défini" erreur. pouvez-vous s'il vous plaît aider.
Je viens de vérifier le violon, et il semble bien pour moi.
J'ai utilisé votre solution pour le filtrage d'une immense table et il fonctionne très bien. Le seul problème que j'ai je ne peux pas garder une trace du nombre des objets filtrés. Je ne veux pas créer un nouveau tableau et pousser les objets filtrés. Est-il un moyen facile de faire cela?

OriginalL'auteur Matt Way

Vous devez vous connecter pour publier un commentaire.