Angular 未提供过滤器时显示全部

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);
        };
    });

我已经为此工作了一段时间，我很好奇是否有人能看到任何导致其无法正常运行的明显问题 "right"。我意识到这一定是我的错误。我对 Angular 的了解充其量是最少的。

如果能就此问题提供任何帮助，我将不胜感激。

Answer 1

当他们使用 return true 获得匹配条件时，你正在 returning 数组，但是如果没有选择任何过滤器，那么你必须 return 通过添加整个数组在应用标准之前先将条件放在首位。

过滤器

$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

Answer 2

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

过滤器

$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

Angular 未提供过滤器时显示全部

Angular Show All When No Filter Is Supplied

javascript

checkbox

filter

angularjs