Question

所以我读过这个：how to use custom filter in angularjs让我走到这一步。而且我不想重新开放，因为它已经3岁了。

我得到的问题是，这是从元素视图中的chrome调试器复制的，它已经注释掉我的循环和过滤器，所以屏幕上什么也没发生。

<!-- ngRepeat: person in $ctrl.people |  icfilter:W -->

我的应用和过滤器

var app=angular.module("componentApp", []);

app.filter('icfilter', function() {
    return function(people, filterBy) {
        var out = [],
         lowerFilter = filterBy.toLowerCase();

        angular.forEach(people, function(person) {

          if (person.name.toLowerCase().includes( lowerFilter)){
              out.push(person);
          }
        });

        return out;

      }
});

html模板

<!DOCTYPE html>
<html>
<head>
<script src="angular/angular.min.js"></script>
<script src="app/component.js"></script>

<script src="app/namesList.component.js"></script>
<meta charset="ISO-8859-1">

<title>Components</title>
</head>
<body>

    <div ng-app="componentApp">
        <names-list></names-list>

    </div>
</body>
</html>

最后是我的组件

angular.module("componentApp").component("namesList",{
    template: '<div >' +
            '<h4>Family members:</h4>'+


            '<li ng-repeat="person in $ctrl.people |  icfilter:W">{{ person.name +", " + person.age }}</li>'+
        '</div>',
    controller: function namesListController(){
        this.filterBy="W";
        this.people = [ {
            age : 46,
            name : 'Wendy'
        }, {
            age : 50,
            name : 'Joe'
        }, {
            age : 11,
            name : 'Frank'
        }, {
            age : 6,
            name : 'Jenny'
        } ];
        this.sort='name';
    }
});

Answer 1

你几乎是对的。进行以下更改，它应该有效：

'<li ng-repeat="person in $ctrl.people |  icfilter:\'W\'">

您在传递W :)时错过了单引号

这是the plunker for reference

Answer 2

现在正在工作，但我不知道为什么。

我把它重新组合在一起，替换了我删除的代码以使答案更小（排序和过滤盒等），现在它正在运行。

AngularJS，一个使用自定义过滤器的组件

2 个答案: