Here we look at how you can create a custom filter using Angular JS. See our other videos to find out how to create custom parameters into these types of filters.
In this video we’re going to demonstrate how to create a custom filter in AngularJS. So, as you can see here, I have my ng-app defining my application on this div element right here, and then down here I have angular. module, and defining the module for my application. Now for executing this code, we’re going to do everything within a run block within a run function, and we’re going to do things off of the rootScope. Typically in a real angular application you would create a controller and then do everything off of a childScope, not in the rootScope, but for the purposes of demonstrating a filter, we will be using this approach. So if I have a template variable, we’ll call it message, and if I come down here on my rootScope, and I say rootScope. message, and then I say, “Hello World!”. If I save that and then reload my web browser we’re going to see that I have my “Hello World!” displayed here in my view, alright? So Angular has a filter called Uppercase and to call a filter in AngularJs, we basically just put this pipe character followed by the name of the filter, so…
In this video tutorial we show you an example of how to pass custom parameters into a custom filter in Angular JS. If you want to learn how to create a custom filter, check out our other video called “Creating a Custom Filter in Angular JS”.
In this video demonstration, we’re going to take a look at how we can pass parameters into our custom filters in AngularJS. Now here we have our application defined on this div DOM element here, and then down here we have the module for our application. Now you’ll notice that I’m going to be doing everything with the root scope in this demo.
Typically, you would create a controller and then use a child scope, but for a simple demo on filters, using the root scope is sufficient. OK, so I’m going to come up here and add a message template variable. And then down here in my run function, I’m going to say rootScope. message=”Hello World!”. We’re going to save that, we’ll come back to our web browser, reload the page, make sure that it loads fine and it does.
Excellent. There’s our “Hello World!”. Now, what we want to do, is we want to create a custom filter with a parameter. So to create a filter in AngularJS, we’re going to use the filter function, and I’m going to call this filter myConCat, and basically what we’re going to do, is we’re going to concatenate two strings together….
Here we take a look at an example of creating a custom AngularJS filter to filter a list of ordered or unordered items.
In this code demonstration we’re going to take a look how we can create a custom AngularJS filter to actually filter a list of items. So we’re going to come in here and we’re going to add a very simple unordered list element and we’re going to add some list items and we’re going to do an ng repeat=items and items, we add our item here then we’ll close out our list item element. Now down here in our code we’re going to do this with the root scope inside of a run block.
Typically you would do this in a controller with a child scope that type of thing in a real application but to demonstrate this filter functionality, working in the root score is perfectly fine. So I’m going to have rootscore. items and I’m going to say one, two, three, four, five, six, seven, eight, nine, ten, and now what I’m going to do is I’m going to load this up in my web browser, and we’re going to see a list of ten items, alright?
So 1-10. Now let’s say I wanted to create a filter that would only show me items with a number value…
And now what I’m going to do, is I’m going to actually just put a colon there then put + param1. I’m going to save that, and then I can reload my webpage, and we’re going to see that we can see the value that we passed in was ‘Hi!’. Alright, so, so far that’s pretty standard, I mean, if you would look at any other programming language, you’d say, okay, that makes sense, but…
In this demonstration, we’re going to take a look at several different ways to invoke a function. So, I’m going to define a very simple function here called myFunc, and we’re going to give it one parameter. And what we’re going to do, is we’re actually going to say console.log( “myFunc was called”), so we can see that the function itself was called.
For this part of the demo, I’m actually going to turn this off so that you can see the output of the this object under certain conditions, and then later on we’ll turn it back on and I’ll show you what the difference is. So…
So here we have our widget object, now to kind of help us out with this demonstratio we are going to create a fuction called Displayinfo. Displayinfo is going to take parameters one is the objects itself followed by the property name and simply we are just going to output to the console log, the actual property descriptor information for a given property on the object.
So we’ll do Object.getOwnPropertyDescriptor just like that and then we’re going to pass in the object, and then we’re going to say property name and this will actually return out to us the property descriptor. So if we were to say dispalayinfo,widget,color; the output of this is going to look like this….
In this demonstration, we’re going to take look at how we can define many properties on an object at one time. So let’s say I’ve got this object here. We’ll just make it an empty object literal. I can use the Object.defineProperty function to actually define a new property on this object.
So the first parameter is the object that I want to add the property to, then I’m going to add a new property called color, and then in here, I actually specify what my descriptor is going to be. So in this case, I want to make this property writable and I want to set the value of it to blue. So I can do this, and then I can come down here and I can actually say, console.log( object. color), and this will output to the web browser, the value of the property which is in fact blue. So I come here and I reload this, you’ll see that it outputs blue. But let’s say I wanted to define many properties on an object. Instead of just calling define property multiple times, I just want to pass in an object that has multiple properties defined.
In this demonstration, we’re going to take a look at something that’s interesting about closures. I want to create a couple of global variables here. Var x, y and funcs, and funcs is going to be basically an array of functions. So I want to create a little loop here, we’ll say x=0 and then x<5, and then we’ll increment x on each iteration, and then we’re simply going to say, funcs.push, and we’re going to pass a function in here.
It’s going to be a very simple function, all it’s going to do, is do a console.log(x). So we’re going to basically create five functions, push them onto an array, and then we’re going to iterate over that array, and we are going to execute those functions. So we’ll do, y<5, y++, and then we’ll come in here, and we’ll actually say funcs, and we’ll reference the function with the y, and then we’ll actually execute it.
And so this will actually loop over all five functions and we’ll output the value of x to the screen. Now if we reload our webpage here, we’re going to see that we get 5 outputted five times. Now a lot of…
In this demonstration we’re going to take a look at the three types of properties that can be attached to an object. So the first type of property that we can attach is what’s known as an Instance Property. So I’m going to create a new Instance Property here on this on this widget object, we’ll call it Instance Func, it’s simply just going to be a function that actually outputs a line of text to the console.
So we’ll just say, an instance func was called, now we’re going to create another type of property, we’re going to create a Prototype Property so we’re actually going to put this one right off the Prototype of the widget object, and we’ll call this a prototype func just like this, and we’ll do it console.
log, a prototype func was called, there we go. The third type of property that we can have is what I call a Static Property. So we’re going to create a static func, we’re going to create this right off of the Widget Function Object put a function on here, and we’ll just have it output console. log a static func was called, there we go….
An example of how you can extract a prototype of an object and then replace the prototype’s methods with new custom methods.
In this demonstration, we’re going take a look at how we can take an object’s prototype and actually modify that object and extend it to perform additional functionality that we might be interested in. To perform this demo, I’m actually including 2/3rd party libraries, I’m going to be using jQuery, and I’m going to be using the Q promise library.
So down here I have set up my two deferred objects. I have an object called first Deferred and a second object called secondDeferred, and basically what I want to do, is I want to chain these two promises. So I first of firstDeferred. promise, and then hanging off that promise I have a then statement, which is then going to execute another function once that first promise is resolved. And the second deferred promise is going to be returned from this then statement, and once that promise gets resolved, then the final function here, saying both promises resolved, will be executed.
To actually resolve these, I’m just going to use a simple set Timeout. I have the setTimeout for the first Deferred to be resolved after 3000 milliseconds or 3 seconds, and for the secondDeferred, I have it set…
The top software freelance developers
software blog posts