Angularjs Tricks

Posts

Download Offline Version of Angular Documentation

This method is little tricky but it works. You only requires google chrome browser to download offline version of angular.io website. The steps are as follows: Open angular.io in chrome browser. Open all the pages at least once that you wanted to be available for offline reading. The pages will cached in browser. Now goto More tools > Add to Desktop and click add. Your offline version of angular.io is on desktop. Try it after disconnecting from the internet. Note: If you have not opened all the pages before step 3. There is no problem. Reconnect to internet and open all those links in the added shortcut on the desktop.

Automatic Slashing the Date Input using Angularjs

We define a directive that will automatically slash the input field as user typein the date. The directive have following capabiltiy: The directive will append slash '/' when input field has 2 or 5 characters. The input will accept only 10 characters (dd/mm/yyyy). Validity of date provide will not be checked. When the backspace is pressed it will remove the last two character if last character is slash. Otherwise it will remove last character from the input field. The input will not accept characters other than numbers (0 to 9). Let's jump into the code. We will use bootstrap for awesome look: HTML Code: <div class="container" ng-app="myApp" ng-controller="myAppCtrl"> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <form class="form-horizontal"> <h4 class="bg-primary">Auto Slashing Date using Angularjs Directive</h4> <div class=...

Conversion between Date String and Timestamp using Angularjs Directive

Let me ask you one question. Can a veiwValue and modelValue have same value into a different format? The answer is YES . Here we will see how it can be possible. We will see it through a simple example that converts date string (viewValue) into timestamp (modelValue). We will use a text box to enter a date string (dd/mm/yyyy) and convert it into timestamp that will be stored into model value. The trick is that we will use $parsers to convert the date string into the timestamp and $formatters to change the timestamp stored in modelValue to date string that will be shown on text input. Let's see the codes first: HTML Code: <h4>Date to Timestamp</h4> <div class="form-group"> <label for="date1" class="col-sm-3 control-label">Date1 VeiwValue:</label> <div class="col-sm-3"> <input type="text" id="date1" class="form-control" name="date1" ng-model="ob...

$parsers and $formatters in Angularjs

$parsers and $formatters are array of function defined on ngModelController . When there is change in values (view or model), the value is passed through the $parsers or $formatters pipeline to convert it according to the needs. $parsers (View to Model): $parsers is an array of function which executes when there is change in view value ( $veiwValue ), usually via user input. $parsers cause the conversion of view value into the form desirable to assign in model value. The value is passed through each $parsers function and the return value of one function is passed to next function. Last return value is passed to $validators and after validation the value is assigned to model. These $parsers functions are called array order (i.e. index 0 to n). $parsers are not called when there is change in model value programmatically. $parsers function must return some value. If it not, causes parse error and model value is set to undefined . Let's see the simple ...

Dynamically Generating Form Elements Using Angularjs

While creating a UI for the web apps, we come up with the situation where we want to get the same type of information from the user. In some situation, we have no idea about the number of that particular type of information the user wanted to provide. In this situation, we come with the solution to dynamically add the field or group of fields based on the user interaction with the form element. For e.g.: user's phone number- User will decide the number of phones it wishes to enter into the form. The idea is simple. We will provide the user a way to add the number of fields it requires. There is also a possibility when the user wishes to remove the previously added fields. To implement the dynamic fields addition, we will use ng-repeat directive to render the fields or group of fields. This ng-repeat directive is to be defined on the div element which wraps the markup for the fields which is to be dynamically added. Let jumps into the code. For the awesome look we will use ...

Auto generating the year in select using ngOption

While creating an angular form, we come upon a situation where we required to generate the sequence of years in the select HTML tag. There is some way to perform this task, but each has its limitation. Let's look the way to generate the years : Hard code an array having years in your controller and assign it to some $scope variable. Use for loop to generate the years and then assign to $scope variable. Send $http request to generate the array of year and assign the response data to $scope variable. Define a filter that will be used to generate the sequence of years. As the first and second method makes our controller dirty and the third method causes HTTP request that will overhead server, so we are going to see the fourth method to generate the years as it has several advantages over other three methods. So let's jump into the code: HTML Code: <form name="myform"> <select ng-options="year for year in [] | range: '2000':'20...