過濾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-重複不起作用

回答

相關問題