1

我是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 号程序中不起作用

求大神指点一下，问题出在哪里

4

2 回答 2

2

我认为这是因为您有返回值但没有值列表的方法列表。如果我们打印<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

于 2013-11-08T07:56:11.147 回答
1

默认过滤器仅循环通过对象的属性和基于其值的过滤器。

在您的情况下，过滤器在contact.getName、contact.getEmail中找到 searchName ，但在contact.getName()和contact.getEmail()中没有

由于contact.getName 包含一个函数但没有它的返回值，因此您的过滤器失败了。

使用自定义过滤器可以解决您的问题，或者最简单的方法是让您的联系人对象公开一些公共属性，例如“姓名”、“电子邮件”。

于 2013-11-08T08:05:06.907 回答