使用ng-repeat復選框的AngularJS過濾器顯示所有頁面加載

Question

該帖子類似於某人之前發布的帖子，但有所不同。 我在過濾復選框時遇到麻煩，我希望所有產品都在頁面加載時加載，並且當我在technologyArray和/或technologyArray2中選中多個復選框時，它將顯示與復選框名稱匹配的所有產品。 現在，我的復選框僅執行AND條件，因此當我選中多個復選框時，沒有任何結果。 這是我在JSFiddle中的代碼。 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

請更改此條件

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

===>

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

這是technologyArray的一個例子

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