角度 JS 过滤器

Angular JS filter

本文关键字：过滤器 JS 角度      更新时间：2023-09-26

我是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>

它们都是相同的，但过滤器在程序 No 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">

演示小提琴

默认筛选器仅循环遍历对象的属性，并根据对象的值进行筛选器。

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

由于 contact.getName 保存函数但不保存其返回值，因此筛选器失败。

使用自定义筛选器可以解决您的问题，或者最简单的方法是让您的 Contact 对象公开一些公共属性，例如"名称"、"电子邮件"。

相关文章：