数组过滤器为空时返回全部答案

【问题标题】：Array Filter return all when empty数组过滤器为空时返回全部
【发布时间】：2017-07-02 19:14:02
【问题描述】：

我正在使用数组过滤 ng-repeat。我希望 ng-repeat 在 filterarray 为空时显示所有内容。

HTML

<!DOCTYPE html>
<html ng-app='Test'>
<head>
  <script src="http://code.angularjs.org/1.1.1/angular.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>
<body ng-controller='Ctrl'>
  <div ng-repeat='letter in letters | inArray:filterBy:"id"'>{{letter.id}}</div>

</body>
</html>

angular.module('Test', [])
.filter('inArray', function($filter){
    return function(list, arrayFilter, element){
        if(arrayFilter){
            return $filter("filter")(list, function(listItem){
                return arrayFilter.indexOf(listItem[element]) != -1;
            });
        }

    };
});

function Ctrl($scope) {
  $scope.letters = [
    {id: 'a', name:'nameA'},
    {id: 'b', name:'nameB'},
    {id: 'c', name:'nameC'},
    {id: 'd', name:'nameD'},
    {id: 'e', name:'nameE'}
  ];

  $scope.filterBy = [];
}

JSBIN: http://jsbin.com/buteyorabi/edit?html,js,output

【问题讨论】：

标签： javascript angularjs arrays filter ng-repeat

【解决方案1】：

返回数组应该是这样的：

.filter('inArray', function($filter){
    return function(list, arrayFilter, element){
        if(arrayFilter){
            return $filter("filter")(list, function(listItem){
                var result = arrayFilter.indexOf(listItem[element]);
                return (result != -1)?listItem:/*something to like to return*/;
            });
        }

    };
});

【讨论】：

【解决方案2】：

只需检查arrayFilter 的长度。如果长度 = 0，则返回您的 list；

    if(arrayFilter && arrayFilter.length > 0){
        return $filter("filter")(list, function(listItem){
            return arrayFilter.indexOf(listItem[element]) != -1;
        });
    }

    return list;

完整示例：JSBin

【讨论】：