ng-repeat onay kutularını kullanan AngularJS filtresi, tüm sayfa yüklenme oranını gösterir

Question

Bu, daha önce başka biri tarafından gönderilen ancak farklı varyasyonlara sahip bir gönderiye benzer. Tüm ürünlerin sayfa yüklenmesine yüklenmesini istediğim onay kutularını filtrelemede sorun yaşıyorum ve technologyArray ve/veya technologyArray2 içinde birden fazla onay kutusunu işaretlediğimde onay kutusunun adıyla eşleşen tüm ürünleri gösterir. Şu anda, onay kutularım yalnızca bir AND koşulu yapıyorlar, böylece birden fazla onay kutusunu işaretlediğimde hiçbir sonuç alamıyorum. İşte benim kodumJSFiddle. 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

bu Koşulu

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

===>

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

değiştirme Lütfen

İşte bir örnek var mı için technologyArray

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