Angular JS filter

Question

I am new to AngularJS and just started doing some stuff in that,

I have a very basic doubt,

Program No : 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>

This program is working with filter the way it should work.

Program No : 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>

They both are same but the filter in not working in the Program No 2

Please shed some light on it, where is the problem

Maxim Shoustin · Accepted Answer · 2013-11-08 07:56:11Z

2

I think it happens because you have list of methods that return value but not list of values. If we will print <pre>{{contacts|json}}</pre>, we get empty list. Therefore, to make it work, use custom filter, like:

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

And HTML:

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

Demo Fiddle

answered Nov 8, 2013 at 7:56

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prasad K - Google · Accepted Answer · 2013-11-08 08:35:03Z

1

Default filter loops through only properties of the object and filters based on their values.

In your case, filter is finding searchName in contact.getName, contact.getEmail, but NOT in contact.getName() and contact.getEmail()

As contact.getName holds a function but not its return value, your filter is failing.

Using custom filters can solve your problem OR the easiest method is to have your Contact object to expose some public properties such as "name", "email".

edited Nov 8, 2013 at 8:35

answered Nov 8, 2013 at 8:05

Prasad K - Google

2,5841 gold badge17 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular JS filter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related