by David Loo | Nov 22, 2014 | AngularJS
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
by David Loo | Nov 22, 2014 | AngularJS
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
by David Loo | Nov 16, 2014 | AngularJS
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
