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>

我想要达到的目标是，如果我在第一个下拉菜单中选择一只动物，那么只有拥有该动物的动物才能成为动物的一种动物。应该在重复中显示，如果我在第二个下拉列表中选择动物，则只应显示具有该动物的人。如果我在两个下拉菜单中选择动物，则只应显示具有相应动物的人（必须精确，不能被镜像）。

我的问题是＆＃34;仅用于测试＆＃34; -div显示从下拉列表中选择的正确过滤器，但列表未被过滤，它始终显示所有动物。当我在下拉列表中更改值时，console.logs也始终打印＆＃34;所有动物＆＃34;。任何人都可以看到我的错误吗？

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相同。

过滤ng-repeat不起作用

2 个答案: