Category Archives: Web Development

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

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.

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.

Creating elements if you are using JavaScript( not jQuery library)

In an HTML document, the document object provides a createElement() method that creates the specified HTML element. The document object in any HTML document is the root node and the parent of all other nodes. After loading the html page into a browser, you can access document object.

For the example:
var elemObj = document.createElement(‘put the tagName’);

elemObj is the created Element object. You need to specify the type of element to be created in place of ‘put the tagName’.

The following is the simple HTML document that contains single div element.

<!DOCTYPE html>
<html>
<head>
  <title>Event handling</title>
</head>
<body>
  <div id="div1"></div>
</body>
</html>

Add ‘click’ event to div1

document.body.onload = addDiv;
 
function addDiv()
{
	var div1 = document.getElementById("div1");
	var elemDiv = document.createElement('div');
	elemDiv.innerHTML = "Create Button";
	div1.appendChild(elemDiv);
	elemDiv.addEventListener("click", createButton);
}
 
function createButton()
{
    var btn = document.createElement("button");
    var text = document.createTextNode("Save");
    btn.appendChild(text );
    document.body.appendChild(btn);
}

The ‘createButton’ is a event listner which is the reference of the handler. We can say that event listener refers to a function or object registered via addEventListener() method or by using the following ways:

by HTML attribute, for example:
<button onclick=”createButton(event);”>,

or by setting the corresponding property from JavaScript, for example:
document.getElementById(“btn”).onclick = function(event) { … }.

Using the anonymous function as listener

An anonymous function is a function that was declared without any named identifier to refer to it. As such, an anonymous function is usually not accessible after its initial creation. You can use these as:

elemDiv.addEventListener("click", fucntion(){
	var btn = document.createElement("button");
	var text = document.createTextNode("Save");
	btn.appendChild(text );
	ocument.body.appendChild(btn);
});

In the first way, we are using a named identifier for the event listener function so that we can use this later. We can call element.removeEventListener to remove the event but in second way where we are using anonymous function. it is not possible to call element.removeEventListener(that can be case of memory leak :)).

Ambiguous match found: Error in ASP.Net Application

Some time it’s very hard to figure out whats exactly going wrong when we get Error “Ambiguous match found”.
Because this issue you will seen when you publish code on server even your development code working fine and see you proper output.

Error

I face this problem today and after a lot of googling I figure out the best way to overcome this issue is that,
When you work with a Asp.net website project then very first you need to convert it in Web Application Project

How to convert Web Site to Web Application project

After that follow the following Steps –

1. Select your page on which you are getting Ambiguous match found issue.
2. Right Click and Select “Convert to Web Application”

Option

as soon as you select this, it will display the actual error. Most of the time this issue happen because of control id conflict with variable name on server site.

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: 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