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

}

Schreibe einen Kommentar