Ui Grid is the popular grid system specially for Angular 1.x(Currently ui-grid doesn’t support angular 2 and above version). Ui-grid has no dependency rather than angular which makes it light weight. It has very rich feature set such as sorting, filtering, grouping and pagination and also has server side support for data-binding and pagination. Continue reading “Drag and drop rows within ui grid in Angular js”
Tag: AngularJS
How to create checkbox list of all week days in AngularJs
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”
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”
‘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”
AngularJS: Using if condition in ngRepeat directive
You know that you can apply the iteration on any html template using the ngRepeat over the collection. Let’s suppose that you have the collection of the city and countries name then you can generate the html template for each item in the collection. Continue reading “AngularJS: Using if condition in ngRepeat directive”
AngularJS: Example – Create table html element using ngRepeat
The following example shows how to draw a table element using the AngularJS ngRepeat. Continue reading “AngularJS: Example – Create table html element using ngRepeat”
AngularJS: How to filtering and order by in the Repeaters
In the previous post ‘starting with controller‘ we learnt how to create and use the controller and ng-repeat directive in the AngularJS template. In the post we will learn the filtering and order by functionality within the repeaters(using ng-repeat). In the below example user enter the search keyword(s) in the input element and see the immediately city list based on the search criteria. Continue reading “AngularJS: How to filtering and order by in the Repeaters”
AngularJS: Starting with controller – display the maths times table
In the previous post AngularJS Example 2 – Create and display the maths times tables using ng-repeat we learnt to use the basics and ng-repeat directive to display the repeating html template. And now we introduce the controller in AngularJS application. Simply controller is the one of the part of the MVC(Model – View – Controller) technique for the web development. Continue reading “AngularJS: Starting with controller – display the maths times table”