Binding Expression :-
Below Example show how to bind input control to anything.
<!DOCTYPE html>
<html ng-app>
<head>
<title>visionfortech.blogspot.com - AngularJS Binding Expression,String Manipulation Using AngularJS </title>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5"
src="https://code.angularjs.org/1.3.0-beta.5/angular.js">
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
Write Anything in textbox:<br>
<input type="text" ng-model="test" />
<br/><br/>O/p :-
<h1>Hey {{ test }} .....!!!!</h1>
</body>
</html>
Output :-
whatever you write into the textbox that will automatically bind dynamically run time .
Today, we will build our own custom AngularJS filters. We’ll start simple and build a couple filters that manipulate numbers and strings, then we’ll build a filter that Converts the enter string into lowercase,uppercase,reverse,reverse and uppercase both. Finally, in our previous articles we discussed about starting programm of angularJS and its introduction and AngularJS dont have inbuilt string reverse filter and reverse + Uppercase filter. Unfortunately, the built-in string filter does not support this functionality, so we’ll build our own that does!
Below is the Example of String Filter.
String_filter.html
For more Technology Related information stay tunned to visionfortech.blogspot.com
<html ng-app>
<head>
<title>visionfortech.blogspot.com - AngularJS Binding Expression,String Manipulation Using AngularJS </title>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5"
src="https://code.angularjs.org/1.3.0-beta.5/angular.js">
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
Write Anything in textbox:<br>
<input type="text" ng-model="test" />
<br/><br/>O/p :-
<h1>Hey {{ test }} .....!!!!</h1>
</body>
</html>
Output :-
String Filter :-
Not too long ago we took a look at some of the built-in Angular filters. The built-in filters cover many common use cases including formatting dates, currencies, limiting the number of items displayed and more. These filters are both useful and give insights into how we may improve our workflow when building Angular applications.Today, we will build our own custom AngularJS filters. We’ll start simple and build a couple filters that manipulate numbers and strings, then we’ll build a filter that Converts the enter string into lowercase,uppercase,reverse,reverse and uppercase both. Finally, in our previous articles we discussed about starting programm of angularJS and its introduction and AngularJS dont have inbuilt string reverse filter and reverse + Uppercase filter. Unfortunately, the built-in string filter does not support this functionality, so we’ll build our own that does!
Below is the Example of String Filter.
String_filter.html
<!DOCTYPE html>
<html ng-app>
<head>
<title>visionfortech.blogspot.com - Sring Filter in AngularJS </title>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5"
src="https://code.angularjs.org/1.3.0-beta.5/angular.js">
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body >
<div ng-controller="MyController">
<input ng-model="greeting" type="text"><br>
No filter: {{greeting}}<br>
Uppercase: {{ greeting | uppercase }}<br>
Lowercase: {{ greeting | lowercase }}<br>
Reverse: {{greeting|reverse}}<br>
Length: {{greeting|reverse:"len"}}<br>
Reverse + uppercase: {{greeting|reverse:"true"}}<br>
</div>
</body>
</html>
<html ng-app>
<head>
<title>visionfortech.blogspot.com - Sring Filter in AngularJS </title>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5"
src="https://code.angularjs.org/1.3.0-beta.5/angular.js">
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body >
<div ng-controller="MyController">
<input ng-model="greeting" type="text"><br>
No filter: {{greeting}}<br>
Uppercase: {{ greeting | uppercase }}<br>
Lowercase: {{ greeting | lowercase }}<br>
Reverse: {{greeting|reverse}}<br>
Length: {{greeting|reverse:"len"}}<br>
Reverse + uppercase: {{greeting|reverse:"true"}}<br>
</div>
</body>
</html>
Script.js
(function(angular) {
'use strict';
angular.module('myReverseFilterApp', [])
.filter('reverse', function() {
return function(input, uppercase) {
input = input || '';
var out = "";
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
// conditional based on optional argument
if (uppercase == "true") {
out = out.toUpperCase();
}else if(uppercase == "len"){
out = out.length;
}else{
out = out;
}
return out;
};
})
.controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {
$scope.greeting = 'hello';
$scope.filteredGreeting = reverseFilter($scope.greeting);
}]);
})(window.angular);
'use strict';
angular.module('myReverseFilterApp', [])
.filter('reverse', function() {
return function(input, uppercase) {
input = input || '';
var out = "";
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
// conditional based on optional argument
if (uppercase == "true") {
out = out.toUpperCase();
}else if(uppercase == "len"){
out = out.length;
}else{
out = out;
}
return out;
};
})
.controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {
$scope.greeting = 'hello';
$scope.filteredGreeting = reverseFilter($scope.greeting);
}]);
})(window.angular);
Output :-
Good Information shared with people who are looking for this, Thanks for providing Angularjs Online course
ReplyDeleteThe blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents...Great job, keep it up..
ReplyDeleteHire angularjs developers