过滤过滤结果函数AngularJS ngrepeat

Question

我想过滤过滤后的结果。

我有以下JSON

$scope.JSON = [
  {
    "Animal": "Horse",
    "Status": "awake",
    "LastUpdate": {
      "$date": 1473248184519
    }
  },
  {
    "Animal": "Rabbit",
    "Status": "awake",
    "LastUpdate": {
      "$date": 1473248194240
    }
  },
  {
    "Animal": "Rabbit",
    "Status": "eating",
    "LastUpdate": {
      "$date": 1473249639255
    }
  },
  {
    "Animal": "Horse",
    "Status": "eating",
    "LastUpdate": {
      "$date": 1473249652549
    }
  },
  {
    "Animal": "Horse",
    "Status": "sleeping",
    "LastUpdate": {
      "$date": 1473249656338
    }
  }
]

和以下过滤功能

$scope.filtering = filtering;

function filtering(animals){
    var temp = [].concat(animals)
    var animalsExisting = []; // To keep track of animals already added
    return temp.reverse().filter(function(animal){
       var notAdded = animalsExisting.indexOf(animal.Animal) === -1;
       if(notAdded) {
           animalsExisting.push(animal.Animal);
       }
       return notAdded;
     })
}

另见这个plunkr： https://plnkr.co/edit/OQVjB47bpS9fKubO2lum?p=preview

如何使用状态过滤未添加的返回数组，例如我想只显示最后一个＆amp; “吃”动物=＆gt;结果：兔子？

Answer 1

第一个选项 - 慢，但很容易

最简单的方法 - 使用原生Angular filter

<tr ng-repeat="roll in filtering(JSON) | filter : { Status: 'eating' }">

第二个选项 - 快速

因为Angular会在每个filtering(JSON)上调用$digest（经常发生），如果你渲染静态列表而不是函数的返回结果会好得多。

我建议您将代码重写为along the lines

$scope.filters = {
    status: null
};

$scope.filteredAnimals = [];

$scope.getLastStatusesForEachAnimal = function() {
    var map = {};

    return [].concat($scope.JSON)
        .reverse()
        .filter(function(animal) {
            return !map[animal.Animal] ? (map[animal.Animal] = true) : false;
        });
};

$scope.filterAnimals = function() {
    $scope.filteredAnimals = $scope.getLastStatusesForEachAnimal()
        .filter(function(animal) {
            return $scope.filters.status ? animal.Status === $scope.filters.status : true;
        });
};

$scope.filterAnimals();

第三种选择 - 有点慢，但更优雅

使用缓存example

编写自己的过滤器

.filter('animalStatusFilter', function() {
    var cache = {
        params: {},
        result: null
    };

    return function(animals, status, onlyLast) {
        var params = {
            animals: animals,
            status: status,
            onlyLast: onlyLast
        };

        if (validateCache(params)) {
            return cache.result;
        }

        animals = onlyLast ? getLastStatusesForEachAnimal(animals) : animals;

        if (status) {
            animals = animals.filter(function(animal) {
                return status ? animal.Status === status : true;
            });
        }

        cache.params = params;
        cache.result = animals;

        return animals;
    };

    function validateCache(params) {
        return params.animals === cache.params.animals &&
            params.status === cache.params.status &&
            params.onlyLast === cache.params.onlyLast
    }

    function getLastStatusesForEachAnimal(animals) {
        var map = {};

        return [].concat(animals)
            .reverse()
            .filter(function(animal) {
                return !map[animal.Animal] ? (map[animal.Animal] = true) : false;
            });
    }
})