过滤NG-重复不起作用

我的人，且每两个宠物下面的列表：过滤NG-重复不起作用

[ 
    { 
     "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>

我想要实现的是，如果我在第一个下拉列表中选择一个动物，那么只有那些有动物为“animalO ne“应显示在重复中，如果我在第二个下拉列表中选择一个动物，则只应显示具有该动物的人。如果我在两个下拉列表中选择动物，则应显示只有具有相应动物（必须准确，不能被镜像）的人。

我的问题是，“只是为了测试” -div显示从下拉choosen正确的过滤器，但名单没有得到过滤，它总是显示所有的动物。当我在下拉菜单中更改某个值时，console.logs也始终显示“所有动物”。任何人都能看到我的错误？

来源

2017-05-09 BluePrint

请提供可运行代码/ jsfiddle。 –

我意识到我可以跳过过滤器，只需使用一个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)">

来源

2017-05-09 08:03:16 BluePrint

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

唯一的问题是我可以假设您的客户数据可能会恢复到正常状态，请检查它是否与指定的$scope.customers相同。

来源

2017-05-09 08:31:09 anoop

过滤NG-重复不起作用

回答

相关问题