Question

我是AngularJS的新手，刚刚开始做一些事情，

我有一个非常基本的疑问，

节目编号：1

<body data-ng-app data-ng-init="nodes=[{name: 'T', age: 25},{name: 'A', age: 26},{name: 'R', age:27}]">
    <div  />

    Filter of the data : {{names}} 
    <br>
    <input type="text" data-ng-model="filtername"> {{filtername}}
    <br>

    <hr>
    <ul>
        <li data-ng-repeat="node in nodes| orderBy: 'name' | filter: filtername">{{node.name|uppercase}} - {{node.age}}</li>
    </ul>

    <script type="text/javascript" src="scripts/angular/angular.js"></script>
</body>

这个程序正在按照它应该的方式进行过滤。

计划编号：2

<div data-ng-controller="Controller_Contact_View">

    Name:<input type="text" data-ng-model="name" />
    Email:<input type="text" data-ng-model="email" />
    <button data-ng-click="add()">Add</button>

    <hr>
    Search on Name:<input type="text" data-ng-model="searchName" />{{searchName}}

    <h2>Contacts</h2>
    <ul>
        <li data-ng-repeat="contact in contacts| orderBy: 'getName()'| filter: searchName"><b>{{ contact.getName() }}</b> - <a href="mailto:{{contact.getEmail()}}">{{contact.getEmail()}}</a></li>
    </ul>

</div>

<script type="text/javascript" src="scripts/angular/angular.js"></script>

<script>
    function Controller_Contact_View($scope) {

         $scope.contacts = new Array();
        //var contacts = ;\

        var c = new Contact('A', 'email_' + 12 + '@pkrm.com');
        $scope.contacts.push(c);

        c = new Contact('R', 'email_' + 1 + '@pkrm.com');
        $scope.contacts.push(c);

        c = new Contact('V', 'email_' + 41 + '@pkrm.com');
        $scope.contacts.push(c);

        c = new Contact('T', 'email_' + 11 + '@pkrm.com');
        $scope.contacts.push(c);

        c = new Contact('K', 'email_' + 10 + '@pkrm.com');
        $scope.contacts.push(c);

        $scope.add= function(){
            var n = $scope.name;
            var e = $scope.email;
            var c = new Contact(n, e);
            $scope.contacts.push(c);
            $scope.name = $scope.email = "";
        };
    }
</script>

<script>

    var Contact = function(name, email){

        this.name = name;
        this.email = email;

        return({
            getName : function(){
                return name;
            },
            getEmail : function(){
                return email;
            },
            setName : function(n){
                name = n;
            },
            setEmail : function(e){
                email = e;
            }
        });
    };

</script>

它们都相同，但过滤器在第2号程序中不起作用

请详细说明问题在哪里

Answer 1

我认为这是因为你有返回值而不是值列表的方法列表。如果我们打印<pre>{{contacts|json}}</pre>，我们会得到空列表。因此，要使其工作，请使用自定义过滤器，例如：

.filter('myfilter', function() {
   return function( items, types) {
    var filtered = [];
    console.log(types);

       if(types === undefined || types == ''){return items;}

    angular.forEach(items, function(item) {        
        if(item.getName() == types){        
          filtered.push(item);   
        }
    });

    return filtered;
  };
});

HTML：

<li data-ng-repeat="contact in contacts| orderBy: 'getName()'| myfilter:searchName">

演示 Fiddle

Answer 2

默认过滤器仅根据对象的属性循环，并根据其值进行过滤。

在您的情况下，过滤器在 contact.getName ， contact.getEmail 中找到searchName，但不在 contact.getName（）中找到 contact.getEmail（）

由于contact.getName包含函数但不包含其返回值，因此您的过滤器失败。

使用自定义过滤器可以解决您的问题或最简单的方法是让您的Contact对象公开一些公共属性，例如＆＃34; name＆＃34;，＆＃34; email＆＃34;。

Angular JS过滤器

2 个答案: