AngularJS-Filter mit ng-repeat-Ankreuzfeldern zeigen alle auf Seite laden

Question

Dieser ist ähnlich wie ein Post, der vorher gepostet hat, aber verschiedene Variationen. Ich habe Probleme beim Filtern von Kontrollkästchen, wo alle Produkte beim Laden der Seite geladen werden sollen und wenn ich mehrere Kontrollkästchen in technologyArray und/oder technologyArray2 ankreuze, werden alle Produkte angezeigt, die mit dem Kontrollkästchen übereinstimmen. Momentan machen meine Kontrollkästchen nur eine AND-Bedingung. Wenn ich also mehrere Kontrollkästchen aktiviere, erhalte ich keine Ergebnisse. Hier ist mein Code inJSFiddle. http://jsfiddle.net/missggnyc/9aL1hm4x/6/

HTML

<div ng-controller="MyCtrl"> 
    <h1>Language 1</h1> 
    <div class="no-decoration" ng-repeat="tech in technologyArray"> 
     <label><input type="checkbox" ng-model="tech.on" ng-change="checkChange()" />{{tech.name}} 
     </label> 
    </div><br> 
    <h1>Language 2</h1> 
    <div class="no-decoration" ng-repeat="tech2 in technologyArray2"> 
     <label><input type="checkbox" ng-model="tech2.on" ng-change="checkChange2()" />{{tech2.name}} 
     </label> 
    </div> 
    <hr> 
    Results: 
    <div ng-repeat="portfolioItem in portfolioArray | filter:myFunc | filter:myFunc2" class="ng-scope"> 
     <h3> {{portfolioItem.name}}</h3> 
    </div>  
</div> 

JS

var myApp = angular.module('myApp', []); 
function MyCtrl($scope) { 

    $scope.showAll = true; 
    $scope.checkChange = function() { 
     for(t in $scope.technologyArray){ 
      if($scope.technologyArray[t].on){ 
       $scope.showAll = false; 
       return; 
      } 
     } 
     $scope.showAll = true; 
    }; 

    $scope.myFunc = function(a) { 
     if($scope.showAll) { return true; } 

     var sel = false; 

     for(tech in $scope.technologyArray){ 
      var t = $scope.technologyArray[tech]; 
      console.log(t); 
      if(t.on){ 
       if(a.technology.indexOf(t.name) == -1){ 
        return false; 
       }else{ 
        sel = true; 
       } 
      }   
     } 
     return sel; 
    }; 

    $scope.showAll2 = true; 
    $scope.checkChange2 = function() { 
     for(t2 in $scope.technologyArray2){ 
      if($scope.technologyArray2[t2].on){ 
       $scope.showAll2 = false; 
       return; 
      } 
     } 
     $scope.showAll2 = true; 
    }; 

    $scope.myFunc2 = function(b) { 
     if($scope.showAll2) { return true; } 

     var sel2 = false; 

     for(tech2 in $scope.technologyArray2){ 
      var t2 = $scope.technologyArray2[tech2]; 
      console.log(t2); 
      if(t2.on){ 
       if(b.technology2.indexOf(t2.name) == -1){ 
        return false; 
       }else{ 
        sel2 = true; 
       } 
      }   
     } 
     return sel2; 
    }; 


    $scope.technologyArray = [{ name: "HTML", on: false}, {name:"CSS", on: false}, {name:"Django", on: false}, {name:"Python", on: false}, {name:"AngularJS", on: false}, {name:"Javascript", on: false}, {name:"3rd party Payment API", on: false}, {name:"3rd party Libraries", on: false}] 

    $scope.technologyArray2 = [{name:"Jquery", on: false}, {name:"RestfulAPI", on: false}, {name:"AAAAAHH", on: false}, {name:"NodeJS", on: false}, {name:"Mongo", on: false}, {name:"Express", on: false}, {name:"Jade", on: false}, {name:"Wordpress", on: false}, {name:"MySQL", on: false}, {name:"Joomla", on: false}, {name:"Magento", on: false}, {name:"Jira", on:false}]; 

    $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

Bitte Ändern Sie diese Bedingung

  if(a.technology.indexOf(t.name) == -1){ 
        return false; 
       }else{ 
        sel = true; 
       } 
      }  

===>

if(a.technology.indexOf(t.name) != -1){ 
        return true; 
       }else{ 
        sel = false; 
       } 

Hier ist ein Beispiel für technologyArray

http://jsfiddle.net/shadiq_aust/9aL1hm4x/9/