PU$]-[KAR's

… Every drop has ability to survive .


4 Comments

Change ‘ng-pattern’ dynamically in AngularJS

Hey,

In AngularJS ng-pattern is widely used for validation and ‘Regular Expression’ is passed to attribute ‘ng-pattern’ as value. Its one of the cool feature which makes developers life easy to apply validation bsed on the regex i.e.regular expression.
So, I would like to share one example which change validation at run-time dynamically. The key thing is to set value for ng-pattern dynamically.

Prior to that we should have some basic knowledge about $viewValue.

$viewValue: $viewValue is the variable exposed by controller to handle validations or to filter results based on the value of it.

$setViewValue: This function should be called if $viewValue has been changed grammatically.This method updates value of $viewValue even including parsing that value and validating it against regular expression provided in ng-pattern.

Following code snippet will illustrate example:

HTML:

<button class="btn btn-warning cancel" ng-click="switchToNumericValidation()">Validation to Numeric</button>
<button class="btn btn-warning cancel" ng-click="switchToAlphaNumericValidation()">Validation to Alpha Numeric</button>
<input class="my-input" apply-validation type="text" ng-model="price" ng-pattern="validateTextbox()">

Directive:

angular.module('demo', [])
.directive('applyValidation', function () {
return {
require: 'ngModel',
restrict: 'A',
link: function (scope, elm, attrs, formCtrl) {
scope.$watch('regex', function (value) {
if (formCtrl.$viewValue !== '') {
formCtrl.$setViewValue(formCtrl.$viewValue);
}});}};})

Here if you see, we have created a directive ‘applyValidation’ n applied to ‘input’ control.This directive is responsible to get value from ‘$viewValue’ & validate it against current (selected) ng-pattern.
ng-pattern will get value run time from function ‘validateTextbox()’ bound to it as shown in below.

$scope.validateTextbox = function () {
return $scope.regex;
};

$scope.switchToAlphaNumericValidation = function(){
$scope.regex = $scope.alphaNumericRegex;
$scope.validationApplied="Alpha numeric";
return $scope.regex;}

And this code will work for you !!!

For complete demo click on the link given below.
http://plnkr.co/edit/TZ5coeQ3Pm1iY6j3utmC?p=preview

Advertisements


5 Comments

Accordion effect with ‘ng-grid’ : AngularJS

Good morning

Today, I would like to share one of the highly demanded feature ‘Accordion effect’ using ‘ng-grid’.

From my experience I can say that its one of the great features that ‘ng-grid’ has supported & It really helps to save time while developing an application. Even this feature can be combined with ‘JQuery’ or ‘HTML 5’ to support ‘drag n drop Panel’ to select parameter as grouping criteria.

Here I would demonstrate a simple way to create this application. The most important thing while creating this is ‘groupBy()’ function provided in ‘$scope.gridOptions’. In fact its one of the least documented function by AngularJS.

Example:

HTML:


<div class="gridStyle" ng-grid="gridOptions"></div>

Script:

app.controller('MyCtrl', function($scope) {
$scope.myData = [{ Account: "Account1", Date: "10-1-20012", Location: "india" },
{ Account: "Account1", Date: "10-1-20013", Location: "india" },
{ Account: "Account2", Date: "10-1-20013", Location: "USA" },
{ Account: "Account1", Date: "10-1-20013", Location: "Pakistan" },
{ Account: "Account2", Date: "10-1-20013", Location: "AUS" }
];
$scope.gridOptions = {
data: 'myData'
};

And to group grid rows say on button click the function can be written as below:function accountGroupClick() {
$scope.sort = "Account";
$scope.gridOptions.groupBy("");
$scope.gridOptions.groupBy($scope.sort);
}

The code line ‘$scope.gridOptions.groupBy(“”);’ is responsible to clear grouping (if already applied) & code line ‘$scope.gridOptions.groupBy($scope.sort);’ is responsible to group grid rows as per the parameter. Here in this case grid rows will be grouped based on ‘Account’.

Important:

For grouping rows as per the column names, gridOptions.groupBy() function should have parameter that matches to the property from data which is bind to the grid. In this case we can pass ‘Account’, ‘Date’, ‘Location’ as parameter to gridOptions.groupBy().

Demo:

For working demo please click on link below:
http://plnkr.co/edit/mfDzaWnWHJOuwdds01yh?p=preview


1 Comment

Handling focus and blur dynamically in AngularJS way

Hey guys,

I am developing an application which needs to focus certain elements like button or text box dynamically using angularJs with TypeScript. But the problem was due to the application which is in ‘SPA’ (Single Page Application) framework so it contains number of HTMLs on single web page with ‘hide-n-show’ mechanism. So  this is the way that I have resolved that issue. It might have better solution than this. Please free to share this with me.

Problem:

Consider a scenario that I have 3 HTMLs on a single web page but only only visible at a time with ‘hide-n-show’ way. It means that all pages are going to load & will apply  their respective directive on ‘Page Load’ itself. Each page will have certain data, HTML controls  and Button. This button will be responsible to hide current page & to  show next respective page.

So the task is whenever new HTML gets load a default button should get highlighted. So in angularJS the only way to make it happen using directive only. So here the challenge is to notify that directive to  re invoke the ‘focusing’ functionality.

Solution:

Here is the sample piece of code that I had written to deal with ‘focus & blur’ dynamically using angular JS.

HTML:


<div>
<div class="modal-header">
</div>
<div class="modal-body">
Action carried on 'Enter' button : {{action}}
</div>
<div class="modal-footer">
<button focus-me="toggle" class="btn btn-warning cancel" ng-show="show1" ng-click="click1()">Focus 1</button>
<button focus-me="toggle" class="btn btn-warning cancel" ng-show="show2" ng-click="click2()">Focus 2</button>
<button focus-me="toggle" class="btn btn-warning cancel" ng-show="show3" ng-click="click3()">Focus 3</button>
</div>
</div>
</div>

 Directive:

app.directive('focusMe', function($timeout, $parse) {
return {
link: function(scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function(value) {
console.log('value=', value);
$timeout(function() {
element[0].focus();
});});
element.bind('blur', function() {
console.log('blur')
scope.$apply(model.assign(scope, false));
})}};});

 Important :

Here if you observe ‘toggle’ is the attribute value which is passed to directive. So on the value change of ‘toggle’ the application will come to know that the visibility has been changed and directive ‘focusMe’ needs to carry our refocusing respective elements.

Link:

Demo:
http://plnkr.co/edit/IPTwcMZfjqXLzmJsbJc4?p=preview