Question

这个类似于之前发布过但有不同变化的帖子。我无法过滤复选框，我希望在页面加载时加载所有产品，当我检查techArray和/或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;
                }
            }

===＆GT;

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

以下是 technologyArray

的示例

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

使用ng-repeat复选框的AngularJS过滤器显示页面加载的所有内容

1 个答案: