过滤 ng 重复不起作用

Question

我有以下名单，每人有两只宠物：

[
    {
        "animalOne": "dog",
        "animalTwo": "cat",
        "age": 37,
        "name": "Charles Andrews"
    },
    {
        "animalOne": "dog",
        "animalTwo": "cat",
        "age": 12,
        "name": "Anna Langston"
    },
    {
        "animalOne": "dog",
        "animalTwo": "iguana",
        "age": 43,
        "name": "Chris Oleander"
    },
    {
        "animalOne": "iguana",
        "animalTwo": "cat",
        "age": 13,
        "name": "Martin Stevens"
    },
    {
        "animalOne": "dog",
        "animalTwo": "parrot",
        "age": 23,
        "name": "Alana Anderson"
    },
    {
        "animalOne": "iguana",
        "animalTwo": "parrot",
        "age": 43,
        "name": "Mia Charles"
    },
    {
        "animalOne": "cat",
        "animalTwo": "goldfish",
        "age": 12,
        "name": "Yun Wong"
    },
    {
        "animalOne": "goldfish",
        "animalTwo": "parrot",
        "age": 32,
        "name": "Hannah Alveda"
    },
    {
        "animalOne": "iguana",
        "animalTwo": "cat",
        "age": 9,
        "name": "Sheena Morroning"
    }
]

在我的控制器中，我有以下内容：

$scope.filterOne = 'All animals';
$scope.filterTwo = 'All animals';
$scope.petsFilterList = [
    {
        label: 'All animals',
        value: 'All animals'
    },
    {
        label: 'dog',
        value: 'dog'
    },
    {
        label: 'cat',
        value: 'cat'
    },
    {
        label: 'parrot',
        value: 'parrot'
    },
    {
        label: 'iguana',
        value: 'iguana'
    },
    {
        label: 'goldfish',
        value: 'goldfish'
    }
];
$scope.petsFilter = function(person) {
    //console.log(person);
    console.log($scope.filterOne);
    console.log($scope.filterTwo);
    if ($scope.filterOne === 'All animals' && $scope.filterTwo === 'All animals') {
        return true;
    }
    if ($scope.filterOne !== 'All animals' && $scope.filterTwo === 'All animals') {
        return person.animalOne == $scope.filterOne;
    }
    if ($scope.filterOne === 'All animals' && $scope.filterTwo !== 'All animals') {
        return person.animalTwo == $scope.filterTwo;
    }
    if ($scope.filterOne !== 'All animals' && $scope.filterTwo !== 'All animals') {
        return person.animalOne == $scope.filterOne && person.animalTwo == $scope.filterTwo;
    }
};

在模板中，我有：

<div>
    <select ng-options="pet.value as pet.label for pet in petsFilterList" ng-model="filterOne">
    </select>
    <select ng-options="pet.value as pet.label for pet in petsFilterList" ng-model="filterTwo">
    </select>
</div>
<!-- Just for testing -->
<div>
    {{filterOne}} - {{filterTwo}}
</div>
<div class="pet" ng-repeat="person in customers | filter:petsFilter | orderBy: ['age', 'name']" ng-click="gotoPerson(person)">
    <div>{{person.name}} - {{person.age}}</div>
    <div>{{person.animalOne}} and {{person.animalTwo}}</div>
</div>

我想要实现的是，如果我在第一个下拉列表中选择一种动物，则只有将该动物显示为"animalOne"的人才能显示在重复项中，如果我在第二个下拉列表中选择动物，则只应显示具有该动物的人。如果我在两个下拉列表中选择动物，则只应显示同时具有两个相应动物(必须准确，无法镜像(的人。

我的问题是"仅用于测试"-div 显示从下拉列表中选择的正确过滤器，但列表不会被过滤，它总是显示所有动物。当我更改下拉列表中的值时，console.logs 也始终打印"所有动物"。谁能看出我的错误？

Answer 1

我意识到我可以跳过过滤器，只在重复中使用ng-if：

<div class="pet" ng-repeat="person in customers | orderBy: ['age', 'name']" ng-click="gotoPerson(person)" ng-if="(filterOne == 'All animals' || filterOne == person.animalOne) && (filterTwo == 'All animals' || filterTwo == person.animalTwo)">

Answer 2

过滤器

工作正常，我在 Fiddler 中尝试了这段代码。

我可以假设您的客户数据可能刷新回正常状态的唯一问题，请检查它是否与分配的$scope.customers相同。