In this example, I will show you to create list of all week days with the check boxes using AngularJs.
Continue reading “How to create checkbox list of all week days in AngularJs”
Category: Web Development
How to hide .js and .map files from project explorer in Visual Studio Code
Generally, you would not want to see the compiled .js file and the corresponding .js.map files when you are using the Typescript. However you can use tsconfig.json to output the js and map files to a separate folder, it makes it easier to maintain. But if you don’t use a separate folder, you can use settings.json to hide the js and map files in the project folder explorer. Continue reading “How to hide .js and .map files from project explorer in Visual Studio Code”
Installing XAMPP on Local Windows machine and fixing Port error
XAMPP provides an ideal local development environment, XAMPP is a simple and lightweight solution that allows you to create a ideal local development environment. Continue reading “Installing XAMPP on Local Windows machine and fixing Port error”
How to display sum of two textbox in third textbox in AngularJS
This is the very common requirement to display sum of the two textbox input controls in the third textbox. However, there are many ways to display the sum of the two into the third input control using Angular but the correct implementation is depend on your requirement. Continue reading “How to display sum of two textbox in third textbox in AngularJS”
Sorting objects/columns with multiple fields AngularJS using HTML template binding and javaScript
Sorting in the tabular data is very common task. If you are not using the ui-grid and using other component which doesn’t provide the inbuilt sorting feature, then you need to do some additional work for the sorting. Suppose, I have a HTML table and using the simple ng-repeat directive. I am showing the employees data(name, age and department) in that table and want to sort data by the more than one columns. Continue reading “Sorting objects/columns with multiple fields AngularJS using HTML template binding and javaScript”
Two-way Data Binding in Angular 2 and JavaScript/ES5 – Creating a simple login form
Angular 2 has the different syntax for two way binding. AngularJS 2 is not the updated version of the AngularJS 1. It is completely rewrite framework. AngularJS 1 allows to create a applcation in a MVC pattern which has controllers, views and services etc. AngularJS 2 is the component based, means the whole application is a component which contains another set of components with the strong routing. Continue reading “Two-way Data Binding in Angular 2 and JavaScript/ES5 – Creating a simple login form”
‘Password’ and ‘Retype password’ fields using AngularJs
The below code snippet shows that how can you implement ‘Password and retype password fields should be matched’ validation/feature using the AngularJs. Continue reading “‘Password’ and ‘Retype password’ fields using AngularJs”
AngularJs directive: Restrict user to enter value with only ‘N’ decimal places
Directive Name: aDecimals
How to Use: Add the attribute: n-decimals=”n” where n is the number like 2,3…
If you want to restrict user to 2 decimal points, write like this: evo-decimals=”2″
Source Code:
The following code will restrict user to enter numeric value with decimal upto 4 place.
Javascript code
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { }); app.directive('nDecimals', [nDecimals]); function nDecimals() { return { restrict: 'A', link: function (scope, element, attr) { element.on('input', function (e) { // Read the attribute to know the 'N' number places var maxDecimal = Number(element.attr('n-Decimals')); //Read the enetered value var sal = element.val(); var parts; if (sal.indexOf(".") !== -1) { parts = sal.split("."); if (parts[1].length > maxDecimal) { element.val(sal.substr(0, sal.length - 1)); } } }); // destroy event. scope.$on('$destroy', function () { element.off('input'); }); } }; }
HTML code
<input type="number" n-decimals="4" ng-model="salary"/>
In the above directive we are using the ‘input’ event which is very similar to the ‘onchange’ event. The ‘input event is fired synchronously when the value of an ‘input’ or ‘textarea’ element is changed while ‘onchange’ occurs when the element loses focus, after the content has been change.
How to apply class conditionally using ng-class in AngularJs
The ngClass directive gives you the ability to conditionally change CSS classes via an expression in the html.
Example
Example that demonstrates dynamically set CSS classes on an DIV HTML element. Continue reading “How to apply class conditionally using ng-class in AngularJs”
Event binding to dynamic/runtime html elements
There are lot of situation when you need to deal with runtime html elements. In this guide we will walkthrough for creating elements, registering events to elements, detaching events from elements and destroying elements from the html page. Continue reading “Event binding to dynamic/runtime html elements”