Programming Archives - Shubhs Blog

AngularJs input text character count directive

This directive will help you to count number of characters in input element its applied on. It will create a paragraph () element next to element its applied on and will show count in it. You can also customize count message to show.

/**
 *  How to use :
 *
 *  Apply 'char-count' attribute on text input fields/textarea
 *
 *  Other properties:
 *  char-count-msg="countMsg"  : returns a string with count and max-length (Eg: "5 out of 100")
 *  char-count-auto-show-message="true" : auto display count message near to text inputs
 *
 */
'use strict';
(function () {
    let app = angular.module('testApp');
    app.directive('charCount', ['$log', '$timeout', function ($log, $timeout) {
        return {
            restrict: 'A',
            scope: {
                charCountMsg: "=?",
                charCountAutoShowMessage: "@"
            },
            compile: function compile() {
                return {
                    post: function postLink(scope, iElement, iAttrs) {
                        //angular.element(iElement).parent().append("<p>test</p>");

                        function prepareAndAppendMsg() {
                            if (iAttrs.maxlength) {
                                scope.charCountMsg = iElement.val().length + " out of " + iAttrs.maxlength;
                            } else {
                                scope.charCountMsg = iElement.val().length;
                            }
                            if (scope.charCountAutoShowMessage === 'true') {
                                scope.pElement[0].innerText = scope.charCountMsg;
                            }
                        }

                        if ((iElement[0].tagName === "TEXTAREA" && iElement[0].type === "textarea") || (iElement[0].tagName === "INPUT" && iElement[0].type === "text")) {

                            if (scope.charCountAutoShowMessage === 'true') {
                                scope.pElement = angular.element("<p class='char-count-para'></p>");
                            }

                            iElement.bind('keyup', function () {
                                scope.$apply(function () {
                                    prepareAndAppendMsg();
                                });
                            });
                            iElement.bind('paste', function () {
                                $timeout(function () {
                                    scope.$apply(function () {
                                        prepareAndAppendMsg();
                                    });
                                }, 200);
                            });
                            iElement.bind('focus', function () {
                                if (scope.charCountAutoShowMessage === 'true') {
                                    // append element and re-calculate size
                                    angular.element(iElement).parent().append(scope.pElement);
                                    prepareAndAppendMsg();
                                }
                            });
                            iElement.bind('blur', function () {
                                if (scope.charCountAutoShowMessage === 'true') {
                                    angular.element(iElement).parent()[0].removeChild(angular.element(iElement).parent()[0].lastChild);
                                }
                            });
                        }

                        //angular.element(iElement).parent().prepend(angular.element(iElement).parent().lastChild);

                        //angular.element(iElement).parent()[0].removeChild(angular.element(iElement).parent()[0].lastChild);
                    }
                };
            }
        };
    }]);
})();

/**

* How to use :

* Apply 'char-count' attribute on text input fields/textarea

* Other properties:

* char-count-msg="countMsg" : returns a string with count and max-length (Eg: "5 out of 100")

* char-count-auto-show-message="true" : auto display count message near to text inputs

'use strict';

(function () {

let app = angular.module('testApp');

app.directive('charCount', ['$log', '$timeout', function ($log, $timeout) {

return {

restrict: 'A',

scope: {

charCountMsg: "=?",

charCountAutoShowMessage: "@"

compile: function compile() {

return {

post: function postLink(scope, iElement, iAttrs) {

//angular.element(iElement).parent().append("test");

function prepareAndAppendMsg() {

if (iAttrs.maxlength) {

scope.charCountMsg = iElement.val().length + " out of " + iAttrs.maxlength;

} else {

scope.charCountMsg = iElement.val().length;

}

if (scope.charCountAutoShowMessage === 'true') {

scope.pElement[0].innerText = scope.charCountMsg;

}

if ((iElement[0].tagName === "TEXTAREA" && iElement[0].type === "textarea") || (iElement[0].tagName === "INPUT" && iElement[0].type === "text")) {

if (scope.charCountAutoShowMessage === 'true') {

scope.pElement = angular.element("");

}

iElement.bind('keyup', function () {

scope.$apply(function () {

prepareAndAppendMsg();

});

iElement.bind('paste', function () {

$timeout(function () {

scope.$apply(function () {

prepareAndAppendMsg();

});

}, 200);

});

iElement.bind('focus', function () {

if (scope.charCountAutoShowMessage === 'true') {

// append element and re-calculate size

angular.element(iElement).parent().append(scope.pElement);

prepareAndAppendMsg();

}

});

iElement.bind('blur', function () {

if (scope.charCountAutoShowMessage === 'true') {

angular.element(iElement).parent()[0].removeChild(angular.element(iElement).parent()[0].lastChild);

}

});

}

//angular.element(iElement).parent().prepend(angular.element(iElement).parent().lastChild);

//angular.element(iElement).parent()[0].removeChild(angular.element(iElement).parent()[0].lastChild);

}

};

}

};

}]);

})();

Ionic 4 multiple images base64 conversion for upload

There are various ways to save image data on server side. One of the way is to convert images data to base64 and store it in databases like MongoDb. In this post we are going to see how we can use ion-input to select multiple images and then convert those to base64 format. To select […]

Expandable recursive tree table with AngularJS and Bootstrap

Below is the code for AngularJs directive which will render a table structure containing tree in its first column and data in further columns. By clicking on tree node one can expand/collapse subsequent rows. Please take a look at sample data provided to understand the data model used in this directive. angularTreeTable.directive.js

'use strict';
(function () {
    let app = angular.module('TestApp');
    app.directive('angularTreeTable', function () {
        return {
            restrict: 'EA',
            transclude: true,
            scope: {tableData: '=', tableConfig: '='},
            bindToController: true,
            templateUrl: 'angularTreeTable.directive.html',
            controller: function ($scope, StatusMessage, $sce) {
                let ctrl = this;
            },
            controllerAs: "ctrl"
        };
    });
})();

'use strict';

(function () {

let app = angular.module('TestApp');

app.directive('angularTreeTable', function () {

return {

restrict: 'EA',

transclude: true,

scope: {tableData: '=', tableConfig: '='},

bindToController: true,

templateUrl: 'angularTreeTable.directive.html',

controller: function ($scope, StatusMessage, $sce) {

let ctrl = this;

controllerAs: "ctrl"

};

});

})();

angularTreeTable.directive.html […]

Using HTML5 Web Workers with AngularJs

Web workers introduced in Html5 provide a background mechanism to perform multi-threaded tasks. They add the ability to perform computationally heavy tasks like downloading or mathematical computation without hanging the user interface. Although AngularJS and web workers are both intended for asynchronous execution, both serve different purposes and should be used in conjunction. Angular JS […]

How to show Loader for $http calls in AngularJs ?

Hello Readers !! In this post we are going to see how we can add a loader for $http calls in our angular applications. This loader will be shown whenever our angular application will send some call to server. I am assuming that you are aware of basics of AngularJs, if not then please go through […]

Security Features in AngularJs

One of the major concerns with any new technologies is security. They might introduce security holes into an organization’s IT infrastructure. But if you are using AngualarJs then this concern isn’t very severe. Securing an AngularJS application is as simple as enforcing the good security practices for any web-application. In this post I am […]

PHP Script to scan all ports of website or host

Following is PHP code which will scan all ports of particular host / website and will print list of all open ports in result. This code can be use to probe a server or host for open ports. This is often used by administrators to verify security policies of their networks and by attackers to […]

AngularJS router to use different template for Mobile and Desktop

In your AngularJS application, if you want to use different templates/views for mobile and desktop users then following script may be useful for you. What we have done here is, just wrote a function named as “_isNotMobile”. This function will return true/false by checking user agent of device. And also we have used that function […]