CODEWITHSUNDEEP
javascriptangularjs
Ankur Verma
Ankur Verma

Reputation: 5933

Angular JS filter

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

Upvotes: 1

Views: 726

Answers (2)

Prasad K - Google
Prasad K - Google

Reputation: 2584

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".

Upvotes: 1

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

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

Upvotes: 2

Related Questions