current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote -1 down vote favorite

I am using a function as a filter for an array, but the array is not getting filtered.
Code is below:

<script>
    var app = angular.module('myApp',[]);
    app.controller('myController', [function(){
        var self=this;
        self.name = ["mike", "joe", "steve", "maurice", "ron"];
        self.toUpper = function(element){
            return element.toUpperCase();
        }
    }]);

</script>

<div ng-controller="myController as ctrl">
    <h1>Hello {{ctrl.name|filter:toUpper}}</h1>
</div>

I'm using Angular 1.3.X - pretty much the newest version. Is it no longer possible to filter an array with a function? or Do I need to explicitly create a filter for this?

share|improve this question
    
What has a call of .toUpperCase() to do with filtering? O.o –  Andreas Jan 1 at 18:00
    
@Andreas - I am trying to convert each string element in the array to uppercase. Here's the output I'm looking for: ["MIKE", "JOE", "STEVE", "MAURICE", "RON"]; –  raneshu Jan 1 at 18:04
1  
Angular already has an uppercase filter. Also You need to use this filter of yours on single item not on a list. Else you would need to change it to plnkr.co/edit/0nvJlWY4nJfFGIn0yoo6?p=preview –  PSL Jan 1 at 18:05
    
you need simple use uppercase filter –  Grundy Jan 1 at 18:07

1 Answer 1

up vote 2 down vote accepted

Your filter function is just an expression, which angular filter uses to filter out the items in the provided list. If you return a truthy value it will be a part of the resultant list else it wont just be. In your case you are just returning the value converting to uppercase, not really updating the value.

See arguments section :

function(value, index): A predicate function can be used to write arbitrary filters. The function is called for each element of array. The final result is an array of those elements that the predicate returned true for.

All you just need is to use the existing uppercase filter which is supposed to be used with the item not a list.

An example:-

<ul>
   <li ng-repeat="nm in ctrl.name">{{nm | uppercase}}</li>
</ul>

However if you are really looking to make your filter expression function work, then you need to modify the value in the array (3rd argument), but this will just change the source array itself. Like here

    self.toUpper = function(element, idx, list){
       return list[idx] =  element.toUpperCase();
    }

And remember that view filters run twice atleast every digest cycle, So you should really chose whether a DOM filter is really required or not based on if they are just one time formatting or not. If one time formatting, do it on the controller while setting up the view model itself.

self.name.map(function(name){ return name.toUpperCase();  });

Though it doesn't make much sense to do this (apply filter on the list displayed), you would need to create a filter in-order not to change the source array itself.

  app.filter('toUpperList', function(){
      return function(itm){
        if(!angular.isArray(itm)) return;
        return itm.map(function(itm){ return itm.toUpperCase() });
      }
    });

and

  <h1>Hello {{ctrl.name | toUpperList}}</h1>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.