ng-book3: Expressions, Filters
Expressions
Expressions in Angular have these important, distinct properties:
1. All expressions are executed in the context of the scope and have access to local $scope variables.
2. An expression doesn't throw errors if it results in a TypeError or a ReferenceError.
3. They do not allow control flow functions(if/else)
4. They can accept a filter and/or filter chains.
We can use $parse to parse an Angular expression manually:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="MyController">
<input ng-model="expr" type="text" placeholder="Enter an expression" />
<h2>{{ parsedValue }}</h2>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function($scope, $parse) {
$scope.$watch('expr', function(newVal, oldVal, scope) {
if (newVal !== oldVal) {
var parseFun = $parse(newVal);
$scope.parsedValue = parseFun(scope);
}
});
});
</script>
</body>
</html>
the output is:
Interpolation allows us to live update a string of text based upon conditions of a scope. To run an interpolation on a string template, we need to inject the $interpolate service in our object.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="MyController">
<input ng-model="to" type="email" placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
<pre>{{ previewText }}</pre>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function($scope, $interpolate) {
$scope.$watch('emailBody', function(body) {
if (body) {
var template = $interpolate(body);
$scope.previewText = template({to: $scope.to});
}
});
});
</script>
</body>
</html>
the output is:
Filters
The build-in filters that come out of the box with AngularJS:
currency: format a number as currency:
{{ 12345.678 | currency }}
the output is:
$12,345.68
date: format a date based upon a requested format style.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="MyController">
{{ today | date:'medium' }} <br />
{{ today | date:'short' }} <br />
{{ today | date:'fullDate' }} <br />
{{ today | date:'longDate' }} <br />
{{ today | date:'mediumDate' }} <br />
{{ today | date:'shortDate' }} <br />
{{ today | date:'mediumTime' }} <br />
{{ today | date:'shortTime' }} <br />
</div>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function($scope, $interpolate) {
$scope.today = new Date();
});
</script>
</body>
</html>
the output is:
Year Formatting:
Four-digit year: {{ today | date:'yyyy' }} <!-- 2015 -->
Two-digit padded year: {{ today | date:'yy' }} <!-- 15 -->
One-digit year: {{ today | date:'y' }} <!-- 2015 -->
Month Formatting:
Month in year: {{ today | date:'MMMM' }} <!-- September -->
Short month in year: {{ today | date:'MMM' }} <!-- Sep -->
Padded month in year: {{ today | date:'MM' }} <!-- 09 -->
Month in year: {{ today | date:'M' }} <!-- 9 -->
Day Formatting:
Padded day in month: {{ today | date:'dd' }} <!-- 12 -->
Day in month: {{ today | date:'d' }} <!-- 12 -->
Day in week: {{ today | date:'EEEE' }} <!-- Saturday -->
Short day in week: {{ today | date:'EEE' }} <!-- Sat -->
Hour Formatting:
Padded hour in day: {{ today | date:'HH' }} <!-- 20 -->
Hour in day: {{ today | date:'H' }} <!-- 20 -->
Padded hour in am/pm: {{ today | date:'hh' }} <!-- 08 -->
Hour in am/pm: {{ today | date:'h' }} <!-- 8 -->
Minute Formatting:
Padded minute in hour: {{ today | date:'mm' }} <!-- 23 -->
Minute in hour: {{ today | date:'m' }} <!-- 23 -->
Second Formatting:
Padded second in minute: {{ today | date:'ss' }} <!-- 53 -->
Second in minute: {{ today | date:'s' }} <!-- 53 -->
Padded millisecond in second: {{ today | date:'.sss' }} <!-- .066 -->
filter:
The filter filter selects a subset of items from an array of items and returns a new array.
The filter method takes a string, object, or function that it will run to select or reject array elements. If the first parameter passed in is a :
string: It will accept all elements that match against the string.
object: It will compare objects that have a property name that matches, as with the simple substring match if only a string is passed in. If we want to match against all properties, we can use the $ as the key.
function: It will run the function over each element of the array, and the results that return as non-falsy will appear in the new way.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="MyController">
{{ ['Ari', 'Lerner', 'Likes', 'To', 'Eat', 'Pizza'] | filter:'e' }}
<br />
{{ [{
'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza'
}, {
'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}
<br />
{{ ['Ari', 'likes', 'to', 'travel'] | filter:isCapitalized }}
</div>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function($scope) {
$scope.isCapitalized = function(str) {
return str[0] == str[0].toUpperCase();
}
});
</script>
</body>
</html>
the output is:
json: The json filter will take a JSON, or JavaScript object, and turn it into a string:
limitTo: The limitTo filter creates a new array or string that contains only the specified number of elements, either taken from the beginning or end, depending on whether the value is positive or negative.
{{ "San Francisco is very cloudy" | limitTo:3 }}
<!-- San -->
{{ "San Francisco is very cloudy" | limitTo:-6 }}
<!-- cloudy -->
{{ ['a', 'b', 'c', 'd', 'e', 'f'] | limitTo:1 }}
<!-- ["a"] -->
lowercase: the lowercase filter simply lowercases the entire string.
uppercase: the uppercase filter simply uppercases the entire string.
number: the number filter formats a number as text.
orderBy: The orderBy function can take two parameters: the first one is required, while the second is optional.The first parameter is the predicate used to determine the order of the sorted array. If the first parameter passed in is a :
function: It will use the function as the getter function for the object.
string: It will parse the string and use the result as the key by which to order the elements of the array.
array: It will use the elements as predicates in the sort expression. It will use the first predicate for every element that is not strictly equal to the expression result.
The second parameter controls the sort order of the array:
{{ [{
'name': 'Ari',
'status': 'awake'
}, {
'name': 'Q',
'status': 'sleeping'
}, {
'name': 'Nate',
'status': 'awake'
}] | orderBy: 'name' }}
<!-- [{"name":"Ari","status":"awake"},
{"name":"Nate","status":"awake"},
{"name":"Q","status":"sleeping"}] -->