AngularJS过滤器使用ng个重复复选框显示所有页面加载

AngularJS filter using ng-repeat checkboxes show all on page load

本文关键字:显示 加载 复选框 过滤器 ng AngularJS      更新时间:2024-03-08

这篇文章类似于某人之前发布的帖子,但有不同的变体。我在筛选要在页面加载时加载所有产品的复选框时遇到问题,当我在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"]
    }]

}

请更改此条件

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

===>

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

以下是技术阵列的示例

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