Le filtre AngularJS utilisant les cases à cocher ng-repeat affiche tout sur le chargement de la page

Question

Celui-ci est similaire à un post que quelqu'un a posté auparavant mais avec différentes variantes. Je rencontre des problèmes de filtrage des cases à cocher où je veux que tous les produits se chargent au chargement de la page et lorsque je coche plusieurs cases à cocher dans technologyArray et/ou technologyArray2, elle montre tous les produits qui correspondent au nom de la case à cocher. À l'heure actuelle, mes cases à cocher font juste une condition ET donc lorsque je coche plusieurs cases à cocher, je n'obtiens aucun résultat. Voici mon 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

S'il vous plaît modifier cette condition

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

===>

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

Voici un exemple pour technologyArray

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