Tag Archives: angular

AngularJS: Custom Filters

Here are some basics on how to create your own Angular custom filters. Below I have created a controller with an array of numbers starting from 1 to 10 and I am going to write a custom filter for filtering even numbers and one for odd numbers.

app.controller('AppController', ['$scope', function($scope) {
		$scope.numbers = [1,2,3,4,5,6,7,8,9,10];
	}
]);

To filter even numbers only I created a filter called EvenNumbersOnly which is a function that takes an array of numbers and check each value to see they are even numbers:

app.filter('EvenNumbersOnly', [function() {
		return function(numbers) {
			var evenNumbers = [];
			for (idx in numbers)
			{
				if ((numbers[idx] % 2) == 0)
				{
					evenNumbers.push(numbers[idx]);
				}
			}
			return evenNumbers;
		}
	}
]);

For filtering odd numbers I have done the same thing except it only check for odd numbers šŸ™‚

app.filter('OddNumbersOnly', [function(){
		return function(numbers) {
			var oddNumbers = [];
			for (idx in numbers)
			{
				if ((numbers[idx] % 2) == 1)
				{
					oddNumbers.push(numbers[idx]);
				}
			}
			return oddNumbers;
		}
	}
]);

So now we have our filters ready to be used I will create a html page that will display the original complete set of numbers in the first div element, then I display a set of even numbers using the EvenNumbersOnly filter in the second div element, and then I display a set of odd numbers using the OddNumbersOnly filter in the third div element. Please note that the filter must be used with a pipe after the value you want to filter with:

<html ng-app="app.demo">
	<head>
	<title>Learn AngularJS - Filters</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
	<script src="app.js"></script>
	</head>
	<body ng-controller="AppController">
		<div>
		Numbers: {{ numbers }}
		</div>
		<div>
		Even Numbers: {{ numbers | EvenNumbersOnly }}
		</div>
		<div>
		Odd Nimbers: {{ numbers | OddNumbersOnly }}
		</div>
	</body>
</html>

Download Source Code

AngularJS: Controller Functions

To create a controller function that can be use with an element’s event attribute, you need to define a function with it’s implementation in it and then attached it to the $scope.

Below I have created a new Javascript file called app.js with a controller called AppController. In the $scope I have a property for storing text and one for attaching a function called onClick. When the onClick function is invoked, the message property will be set with a message ‘Hello, World!’:

var app = angular.module('app.demo', []);

// Controllers
app.controller('AppController', ['$scope', function($scope) {
		$scope.message = '';
		$scope.onClick = function() {
			$scope.message = 'Hello, World!';
		}
	}
]);

Below I create a html page with body that usesĀ the AppController controller, I have a input element that is a button type and I use ng-click to bind the function that I have create in the controller. I have created a div that will display the message property every time the button is clicked:

<html ng-app="app.demo">
	<head>
	<title>Learn AngularJS - Functions</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
	<script src="app.js"></script>
	</head>
	<body ng-controller="AppController">
		<input type="button" ng-click="onClick()" value="Click Here" />
		<div><h1>{{message}}</h1></div>
	</body>
</html>

Download Source Code

AngularJS: Data Binding

In AngularJS data binding is very straight forward, you need to assign a model in the ng-model attribute and on your page you can read the model from anywhere on the page either by expressions or ng-model from another element.

<html ng-app="app.demo">
<head>
	<title>Learn AngularJS - Data Binding</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
	<script src="AppController.js"></script>
</head>
<body ng-controller="AppController">
	<input type="text" ng-model="message" />
	<div>{{message}}</div>
</body>
</html>

Above is an example of an input element taking a message as a model and then display the message result with double curly braces. The message model comes from theĀ controller’s $scope eg. $scope.message.

angular.module("app.demo",[])
.controller("AppController", ["$scope", function($scope){
	$scope.message="default message";
}]);

You can download the original source code from GitHub: https://github.com/csharpguy76/LearnAngularJS