AngularJS在ng-repeat中获得自定义过滤器[重复]答案

【问题标题】：AngularJS get custom filter in ng-repeat [duplicate]AngularJS在ng-repeat中获得自定义过滤器[重复]
【发布时间】：2015-10-20 17:01:57
【问题描述】：

我正在尝试为我在表格中显示的项目构建一个过滤器。更具体地说，我想通过某个属性值过滤掉项目，该属性值可能会根据用户的选择而改变。我已经尝试了以下，它似乎工作。在这种情况下，我希望我的国家/地区数组中的所有城市都没有命名为斯德哥尔摩或哥德堡。

<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;
}

【问题讨论】：

如果这个name:'!'+'Stockholm' || 'Gothenburg' 成功了，那么显然getFilter 代码将不起作用..就像它会产生{name:'!'+'Stockholm' || 'Gothenburg'} 而不是你所期望的
您需要创建一个自定义过滤器。 Angular JS 已经内置了。看看这个docs.angularjs.org/guide/filter

标签： javascript angularjs angularjs-filter

【解决方案1】：

过滤器方法被传递给每个元素。您需要将其与您的状况进行比较。

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

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

如果您更改城市列表，它将被反映。

【讨论】：

【解决方案2】：

正如我在评论中提到的，您可以使用 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

注意：此示例仅展示如何使用 Angular js 自定义过滤器，您需要优化和编辑代码以满足您的要求。

【讨论】：