AngularJS在ng-repeat中获得自定义过滤器

时间:2015-10-20 08:30:57

标签: javascript angularjs angularjs-filter

我正在尝试为我在表格中显示的项目构建过滤器。更具体地说,我想按特定属性值过滤掉项目,这些属性值可能会根据用户选择而改变。我尝试过以下操作,似乎有效。在这种情况下,我希望我的国家/地区阵列中的所有城市都没有被命名为斯德哥尔摩或哥德堡。

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

2 个答案:

答案 0 :(得分:0)

过滤方法传递给每个元素。你需要将它与你的状况进行比较。

private void init(){
    recyclerView = (RecyclerView)findViewById(R.id.list);
    recyclerView.setHasFixedSize(true);
    recyclerView.setAdapter(new ViewAdapter(getApplicationContext(), CreateItemList(), R.layout.item_list));
    recyclerView.setItemAnimator(new DefaultItemAnimator());
    recyclerView.setLayoutManager(new LinearLayoutManager(this));

}

private List<ViewModel> CreateItemList(){
    List<ViewModel> items = new ArrayList<ViewModel>();
    for(int i=0;i<20;i++){
        ViewModel model = new ViewModel();
        model.setTitle("title_" + i);

        items.add(model);
    }
    return items;
}

如果您更改城市列表,则会反映出来。

答案 1 :(得分:0)

如我的评论中所述,您可以使用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自定义过滤器,您需要优化和编辑代码以满足您的要求。