Define custom angularjs filter not using module model

Question

I have read about the module way of defining a filter:

myApp.filter('filtername', function() {
  return function() {
  };
});

But what if I am using a simple function controller for my angular app and not as a module?

I.e. all I have at the top of my html is:

<html ng-app ng-controller="MyApp">

and then I include a js file with a simple controller:

function MyApp($scope, $http){
}

but I need to define a custom filter - in my particular case I'm trying to order an ngRepeat using Justin Klemm's object ordering filter. So how can I define a filter not using the module style syntax?

What version of AngularJS are you using? Because it is no longer recommended that controllers be allowed on the global object. You must be using an old version of AngularJS. — georgeawg
– georgeawg, Commented Mar 19, 2016 at 22:41

Valerio Vaudi · Accepted Answer · 2016-03-19 19:15:41Z

1

If you want create a new filter in your app you could define the your custom filter like below:

in your js

angular.module("yourModule")
    .filter("yourFilretName",function(){
        return function(value,arg1,arg2 .....){
            var result = [];
            // filter processing the object that pass the filtering, must be push on the result array
            return result;
        }
    })

in your template

<your-tag ng-repeat="book in bookList | yourFilretName :arg1:agr2:....:argn>
.....
</your-tag>

answered Mar 19, 2016 at 19:15

Valerio Vaudi

4,5622 gold badges29 silver badges27 bronze badges

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

5 Comments

nzn Over a year ago

I specifically mentioned that I'm not using the modular pattern to build my app - I don't have any "yourModule" - so this doesn't help me.

Valerio Vaudi Over a year ago

Ok but the filter logic in angular is used by angular for filter item in the scope. Then if you don't have a module you can't use filter controller and so on. In other words if you want use angular actually you have a module.

nzn Over a year ago

OK. This worked for me. Thanks! And I didn't have to touch my controller as in @Awakening Byte's answer.

nzn Over a year ago

Just to clarify: this solution also required me to edit my html tag to: ng-app="myApp" and also add the line var myApp = angular.module("myApp", []); and only after that angular.module("myApp").filter etc. that is in the answer

Valerio Vaudi Over a year ago

yes I confirm that this is mandatory. You need ng-app="myApp" for say at angular what this is the module for your html page and angular.module("myApp",[]) for creating a new module angular.module("myApp") for retrive the handle for the angular module.

George Chen · Accepted Answer · 2016-03-19 21:54:33Z

1

<div ng-app="myApp" ng-controller="myCtrl">  
  <ul>
    <li ng-repeat="item in items | filter: myFilter">{{ item }}</li>
  </ul>
  ...

var myApp=  angular.module("myApp", []);

myApp.controller('myCtrl', function($scope ) {
    function myFilter(item) { 
        return item == "some condition"
    }
})

edited Mar 19, 2016 at 21:54

answered Mar 19, 2016 at 18:34

George Chen

6,9895 gold badges23 silver badges24 bronze badges

6 Comments

nzn Over a year ago

I'm getting "Uncaught ReferenceError: app is not defined" with this.

George Chen Over a year ago

updated the answer, replaced app with angular.module("yourModule")

nzn Over a year ago

...except I don't have any "yourModule". I'm not building this app using the modular patter. I've built it really simple - just a controller.

George Chen Over a year ago

this is just a place holder... For every angular application, you will define a module (or modules).

nzn Over a year ago

But I didn't define a module and my application works just fine. Do I have to define a module do create a custom filter?

|

Collectives™ on Stack Overflow

Define custom angularjs filter not using module model

2 Answers 2

5 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related