当没有提供过滤器时，角度显示全部

Question

如果没有选择过滤器，我一直在尝试让我的Angular应用程序显示所有结果。我在这里看了类似的问题，但他们的答案因我的申请有些奇怪的原因。

我最初使用它，但在应用过滤器并删除后，不会显示任何数据。

我的工作演示位于以下JS Fiddle

我的HTML

<div ng-controller="MyCtrl">
<h4>Industries</h4>
<div ng-init="group = (industries | groupBy:'industry_id')" style="width:100%">
    <div ng-repeat="ind in industries"   style="width:100px; float:left;">
        <b><input type="checkbox" ng-model="useIndustries[$index]"/>{{ind.industry_name}}</b>
    </div>
</div>
<br>
<h4>Types</h4>
<div ng-init="group2 = (types | groupBy:'industry_type_id')" style="width:100%">
    <div ng-repeat="type in types" style="width:100px;float:left;">
        <b><input type="checkbox" ng-model="useTypes[$index]"/>{{type.type_name}}</b>
    </div>
</div>
<div style="clear:both;"></div>
<div>
    <ul>
        <li  ng-repeat="est in establishments | filter:(!!filterIndustries() || undefined) && filterIndustries()"><p><b>{{est.est_name}} - {{est.industry_id}} - {{est.industry_type_id}}</b></p></li>
    </ul>    
</div>

我的JS

var myApp = angular.module('myApp',[]);

function MyCtrl($scope, filterFilter) {
    $scope.useIndustries = [];
    $scope.useTypes = [];

    $scope.filterIndustries = function () {

        return function (p) {

            if ($scope.useIndustries.length > 0) {

                for (var i in $scope.useIndustries) {
                    if ((p.industry_id == $scope.group[i] && $scope.useIndustries[i])) {
                        return true;
                    }
                }
            }
            if ($scope.useTypes.length > 0) {

                for (var i in $scope.useTypes) {
                    if (p.industry_type_id == $scope.group2[i] && $scope.useTypes[i]) {
                        return true;
                    }
                }
            }

        };

    };

    $scope.industries = [
        { industry_name: "Italian", industry_id: 1}, 
        { industry_name: "Indian", industry_id: 2}, 
        { industry_name: "Spanish", industry_id: 3} 

    ];



    $scope.types = [
        { type_name: "Eat-In", industry_type_id: 1}, 
        { type_name: "Fast Food", industry_type_id: 2}, 
        { type_name: "Takeout", industry_type_id: 3}
    ];

    $scope.establishments = [
        {est_name: 'Luigis Pizza Kitchen', industry_id: 1, industry_type_id:2},
        {est_name: 'Pizza Plus', industry_id: 1, industry_type_id:1},
        {est_name: 'Authentic Mexican Grill', industry_id: 3, industry_type_id:1},
        {est_name: 'Tacos R Us', industry_id: 3, industry_type_id:3},
        {est_name: 'Taste Of India', industry_id: 2, industry_type_id:1},
        {est_name: 'Indian Food Emporium', industry_id: 2, industry_type_id:3}
    ];    
}


var uniqueItems = function (data, key) {
    var result = new Array();
    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];

        if (result.indexOf(value) == -1) {
            result.push(value);
        }

    }
    return result;
};

myApp.filter('groupBy',
            function () {
                return function (collection, key) {
                    if (collection === null) return;
                    return uniqueItems(collection, key);
        };
    });

我一直在研究这个问题，并且好奇是否有人能看到任何明显的问题导致这个问题无法正常发挥作用＃14;正确＆＃34;。我意识到这一定是我的错误。我对Angular的了解充其量只是最小的。

我真的很感激这方面的任何帮助。

Answer 1

您必须首先返回收集，然后必须检查是否已删除所有项目。

过滤

$scope.filterIndustries = function () {

    return function (p) {
        if ($scope.useIndustries.length == 0 && $scope.useTypes.length == 0) {
            return p;
        }
        var isShowAll = true;
        if ($scope.useIndustries.length > 0) {
            for (var i in $scope.useIndustries) {
                if ((p.industry_id == $scope.group[i] && $scope.useIndustries[i])) {
                    return true;
                }
                if($scope.useIndustries[i]){
                    isShowAll = false;
                }

            }
        }
        if ($scope.useTypes.length > 0) {

            for (var i in $scope.useTypes) {
                if (p.industry_type_id == $scope.group2[i] && $scope.useTypes[i]) {
                    return true;
                }
                if($scope.useTypes[i]){
                    isShowAll = false;
                }
            }

        }
        if(isShowAll)
         return p;

    };

};

JSFiddle

Answer 2

当你使用return true获得匹配条件时返回数组，但是如果没有选择任何过滤器，那么你必须通过在应用crieteria之前在顶部添加条件来返回整个数组。

过滤

$scope.filterIndustries = function () {
    return function (p) {
        if ($scope.useIndustries.length == 0 && $scope.useTypes.length == 0) return p;
        if ($scope.useIndustries.length > 0) {
            for (var i in $scope.useIndustries) {
                if ((p.industry_id == $scope.group[i] && $scope.useIndustries[i])) {
                    return true;
                }
            }
        }
        if ($scope.useTypes.length > 0) {

            for (var i in $scope.useTypes) {
                if (p.industry_type_id == $scope.group2[i] && $scope.useTypes[i]) {
                    return true;
                }
            }
        }
    };
};

JSFiddle