自定義過濾器在角度1中未觸發

Question

我在摘要中有兩個字段：genres和secondary_genre，它們是整數。

我有返回值(ng-model = query.genres)

我試圖創建一個自定義函數，它會比較流派和次要流派query.genre如果任一條件滿足返回類型的下拉領域。個別他們工作正常，即與過濾器：{secondary_genre：query.genre），但對於OR條件我需要一個自定義。

我寫的自定義過濾器被稱爲與

<li ng-repeat="film in listOfTitles | customGenreFilter:query.genre"> 

過濾器是

.filter('customGenreFilter', function() { 
    return function(data, query) { 
     if (data) { 
      return data.filter(data.genres == query || data.secondary_genre == query); 
     } 
     else { 
      return []; 
     } 
    }; 
}); 

但它引發錯誤。如果條件genres = query.genre或者secondary_genre = query.genre，我該如何編寫此自定義過濾器來返回項目。

Answer 1

由於您沒有正確使用.filter()方法，因此您的過濾器無法正常工作，該方法需要參數爲一個lambda函數，返回該項是否應該保留在列表中。爲了解決你的代碼，你必須更改以下行：

return data.filter(data.genres == query || data.secondary_genre == query); 

要：

return data.filter(function(item) { 
    return item.genre == query || item.secondary_genre == query 
}); 

下面的示例實現你的過濾器的工作版本。

angular.module('myApp', []) 
 
    .component('app', { 
 
    templateUrl: '/app.html', 
 
    controller: App 
 
    }) 
 
    .filter('customGenreFilter', CustomGenreFilter); 
 

 
function App($scope) { 
 
    $scope.query = { 
 
    genre: '' 
 
    }; 
 
    $scope.listOfTitles = [ 
 
    { title: 'test 1', genre: 'genre1' }, 
 
    { title: 'test 2', genre: 'genre2' }, 
 
    ]; 
 
} 
 

 
function CustomGenreFilter() { 
 
    return function(data, query) { 
 
    if (query === '') return data; 
 
    if (data) return data.filter(function(item) { 
 
     return item.genre == query || item.secondary_genre == query 
 
    }); 
 
    return []; 
 
    }; 
 
} 
 

 
angular.element(function() { 
 
    angular.bootstrap(document, ['myApp']); 
 
});

<script id="/app.html" type="text/ng-template"> 
 
    <select ng-model="query.genre" ng-options="item as item for item in ['', 'genre1', 'genre2']"> 
 
    </select> 
 
    <ul> 
 
    <li ng-repeat="film in listOfTitles | customGenreFilter:query.genre"> 
 
     {{ film.title }} 
 
    </li> 
 
    </ul> 
 
</script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script> 
 
<app />