Drag and drop rows within ui grid in Angular js

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”

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”

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 () {

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.

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”