Filtern von ng-Wiederholungsliste mit Kontrollkästchen und AngularJS

Question

Ich habe viele andere Beiträge zu diesem Thema gelesen und sie alle neigen dazu, einzigartig komplizierte Lösungen zu beschreiben. Ich möchte nur eine Liste von Elementen basierend auf den Kontrollkästchen, auf die ich klicke, filtern (ich brauche ein UND-Filter & in der Lage, alle Elemente zu sehen, bis ein Kontrollkästchen angeklickt wird).

Das scheint mit AngularJS ein Kinderspiel zu sein, aber ich bekomme es einfach nicht. Wie kann ich meinen Code ändern, damit die Filterung funktioniert?

Hier ist meine unvollständig JSFiddle: http://jsfiddle.net/mromrell/qx3cD/1/

Aktualisiert Fiddle hier: http://jsfiddle.net/mromrell/qx3cD/7/

Vielen Dank im Voraus!

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

}

Answer 1

Ich denke, dass ich es in eine ziemlich einfache Art und Weise gelöst haben: http://jsfiddle.net/qx3cD/4/

Das Problem, das Sie haben, ist, dass Kontrollkästchen auf einer Wahr/Falsch-Arbeit Wert-System, während ein Basisfilter auf entspricht Daten sucht. Sie müssen also einen benutzerdefinierten Filter erstellen, um die Kontrollkästchen auf die Daten selbst zuzuordnen. Ich habe diese Grundfunktion verwendet, die einfach die Checkbox-Zustände mit ihrem entsprechenden Namen vergleicht und sie mit der Tech-Liste verknüpft.

$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: Aktualisiert

Ich habe die Geige hier aktualisiert: http://jsfiddle.net/qx3cD/9/

Im Grunde zwei Dinge getan wurden. Der erste war, dass die Kontrollkästchen mit ng-change überwacht wurden, so dass alle Ergebnisse angezeigt wurden, wenn keine Kontrollkästchen ausgewählt waren. Die zweite bestand darin, dass die Filterfunktion so aktualisiert wurde, dass nur Artikel angezeigt werden, die der ausgewählten Technologien enthalten.