过滤 ng-repeat 不起作用答案

【问题标题】：Filtering ng-repeat does not work过滤 ng-repeat 不起作用
【发布时间】：2017-05-09 16:31:09
【问题描述】：

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

[
    {
        "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 也总是打印“所有动物”。谁能看到我的错误？

【问题讨论】：

请提供可运行代码/jsfiddle。

标签： angularjs angularjs-ng-repeat angular-filters angularjs-ng-options

【解决方案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)">

【讨论】：

【解决方案2】：

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

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

【讨论】：