AngularJS在ng-repeat中獲取自定義篩選器

我正在嘗試爲我的項目構建一個篩選器，以便在表中顯示該篩選器。更具體地說，我想通過可能會根據用戶選擇而改變的特定屬性值來過濾項目。我試過以下，它似乎工作。在這種情況下，我希望我的國家陣列中沒有被命名爲斯德哥爾摩或哥德堡的所有城市。AngularJS在ng-repeat中獲取自定義篩選器

<table> 
    <tr ng-repeat="city in cities | filter: name:'!'+'Stockholm' || 'Gothenburg'"> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
    </tr> 
</table>

但是，我想用編程的方式使用構造過濾器的函數來完成這個功能，而且我似乎無法讓它工作。

<table> 
    <tr ng-repeat="city in cities | filter: getFilter()"> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
    </tr> 
</table> 

$scope.getFilter = function() { 
    var filter = {}; 

    if (something) { 
     filter['name'] = '!' + 'Stockholm'; 
    } 

    if (somethingElse) { 
     filter['name'] += ' ||' + 'Gothenburg'; 
    } 

    return filter; 
}

來源

2015-10-20 Tobias Johansson

如果這個'name：'！'+'Stockholm'|| 'Gothenburg''得到了工作，那麼顯然'getFilter'代碼將無法正常工作..就像它會產生'{name：'！'+'Stockholm'|| 'Gothenburg'}'而不是你所期望的 –

你需要創建一個自定義過濾器。 Angular JS已經有了內置的功能。請看這個https://docs.angularjs.org/guide/filter – Skywalker

過濾器方法傳遞每個元素。您需要將其與您的情況進行比較。

$scope.do_not_show_these_cities = ['Stockholm', 'Gothenburg']; 

$scope.getFilter = function (element) { 
    return $scope.do_not_show_these_cities.indexOf(element.name) < 0; 
}

如果更改城市列表，則會反映出來。

來源

2015-10-20 08:44:00

正如我在評論中提到，你可以使用由AngularJS提供自定義篩選：

下面的例子是一個基本的例子這需要每個單詞的第一個字母和過濾器，並將其轉換爲上案件。

<!DOCTYPE html> 

<html ng-app="HelloApp"> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<title></title> 
</head> 
<body ng-controller="HelloCtrl"> 
<form> 
    <input type="text" ng-model="name"/> 
</form> 
<div>{{name|titlecase}}</div> 
<script type="text/javascript"> 
    // Code defining custom module consisting of a filter 
    // The module needs to be included as dependency for using the filter, titlecase 
    // 
    angular.module('CustomFilterModule', []) 
     .filter('titlecase', function() { 
      return function(input) { 
       return input.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); 
      } 
     }); 
    // Angular App on this page 
    // Included CustomFilterModule as dependency 
    // 
    angular.module('HelloApp', [ 'CustomFilterModule']) 
     .controller('HelloCtrl', ['$scope', function($scope){ 
      $scope.name = ''; 
     }]) 
</script> 
</body> 
</html>

繼承人的工作例如：

http://plnkr.co/edit/Ys4pgmKVRcSRFeg8unWr?p=preview

注：這個例子只能說明如何與角JS自定義過濾器的工作，你將需要優化和修改代碼符合你的要求。

來源

2015-10-20 08:56:30 Skywalker

AngularJS在ng-repeat中獲取自定義篩選器

回答

相關問題