Filtern von ng-repeat Liste mit Kontrollkästchen und AngularJS
Habe ich viele der anderen Beiträge auf dieser-und Sie alle neigen dazu, zu beschreiben, eindeutig zu komplizierte Lösungen. Ich will einfach nur das filtern einer Liste von Elementen basierend auf die Checkboxen klicken Sie auf I (ich brauche dringend einen 'UND' Filter & in der Lage sein, um zu sehen, alle Elemente, die zunächst, bis eine checkbox geklickt wird).
Dieser scheint, wie es sein sollte, ein Stück Kuchen mit AngularJS, Aber ich bin einfach nicht bekommen es. wie kann ich das ändern mein code, um das filtern arbeiten?
Hier ist meine unvollständige 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"]
}]
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich denke ich habe es gelöst in einem ziemlich einfache Art und Weise: http://jsfiddle.net/qx3cD/4/
Das problem, das Sie haben ist, dass Checkboxen Arbeit auf einen true/false Wert-system, während eine grundlegende filter ist auf der Suche nach match Daten. Also benötigen Sie irgendeine Art von benutzerdefinierten filtern zum anzeigen der checkbox Mitgliedstaaten, für die Daten selbst. Ich habe diese basic-Funktion, die einfach vergleicht checkbox Mitgliedstaaten auf, Ihre entsprechenden Namen, und wenn Sie im Zusammenhang mit der tech-Liste.
EDIT: Aktualisiert
Habe ich aktualisiert, die Geige hier: http://jsfiddle.net/qx3cD/9/
Grundsätzlich zwei Dinge waren geschehen. Die erste war, dass die Checkboxen waren, sahen mit
ng-change
, so dass alle Ergebnisse angezeigt wurden, wenn keine checkbox ausgewählt wurden. Das zweite war, dass die filter-Funktion wurde aktualisiert, um nur Elemente enthalten alle der ausgewählten Technologien.