Post
Ask Question

Email Tokenizer For AngularJS Directive

Introduction

When implementing a Single Page Application using WebAPI and AngularJS, you encounter many uses of filters and directives to meet requirements specified by clients. The following code snippet tokenizes the input and displays it in a separate block within a specific placeholder, however it checks the input for a valid email address first and then the input token is not repeated within the same placeholder.

  1. <body ng-app="tokenizer">  
  2.     <div ng-controller="tokenizerController">  
  3.         <tag-input taglist='email' placeholder="Emails"></tag-input>    
  4.     </div>  
  5. </body> 
  1. var sample = angular.module('tokenizer', ['ngRoute']);  
  2.   
  3.   
  4. sample.controller('tokenizerController', function ($scope) {  
  5.          
  6.    });  
  7.   
  8.    sample.directive('tagInput', function ()
  9.  {  
  10.        return 
  11.          {  
  12.            restrict: 'E',  
  13.            scope: 
  14.             {  
  15.                inputTags: '=taglist',  
  16.                autocomplete: '=autocomplete'  
  17.               },  
  18.            link: function ($scope, element, attrs) 
  19.               {  
  20.                $scope.defaultWidth = 200;  
  21.                $scope.tagText = '';  
  22.                $scope.placeholder = attrs.placeholder;  
  23.                $scope.tagArray = function () 
  24.                   {  
  25.                    if ($scope.inputTags === #ff0000)
  26.                    {  
  27.                        return [];  
  28.                    }  
  29.                    return $scope.inputTags.split(',').filter(function (tag)
  30.                    {  
  31.                        return tag !== "";  
  32.                    });  
  33.                };  
  34.                $scope.addTag = function ()
  35.                    {  
  36.                    var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;  
  37.                    var tagArray;  
  38.                    if ($scope.tagText.length === 0) {  
  39.                        return;  
  40.                    }  
  41.                    if (!EMAIL_REGEXP.test($scope.tagText))
  42.                    {  
  43.                        return $scope.tagText = "";  
  44.                    }  
  45.                    tagArray = $scope.tagArray();  
  46.                    if (!(tagArray.indexOf($scope.tagText) >= 0))
  47.                    {  
  48.                        tagArray.push($scope.tagText);  
  49.                        $scope.inputTags = tagArray.join(',');  
  50.                    }  
  51.                    return $scope.tagText = "";  
  52.                };  
  53.                $scope.deleteTag = function (key)
  54.                    {  
  55.                    var tagArray;  
  56.                    tagArray = $scope.tagArray();  
  57.                    if (tagArray.length > 0 && $scope.tagText.length === 0 && key === #ff0000)
  58.                    {  
  59.                        tagArray.pop();  
  60.                    }
  61.                    else
  62.                      {  
  63.                        if (key !== undefined)
  64.                        {  
  65.                            tagArray.splice(key, 1);  
  66.                        }  
  67.                    }  
  68.                    return $scope.inputTags = tagArray.join(',');  
  69.                };  
  70.                $scope.$watch('tagText', function (newVal, oldVal)
  71.                 {  
  72.                    var tempEl;  
  73.                    if (!(newVal === oldVal && newVal === undefined))
  74.                       {  
  75.                        tempEl = $("<span>" + newVal + "</span>").appendTo("body");  
  76.                        $scope.inputWidth = tempEl.width() + 5;  
  77.                        if ($scope.inputWidth < $scope.defaultWidth)
  78.                        {  
  79.                            $scope.inputWidth = $scope.defaultWidth;  
  80.                        }  
  81.                        return tempEl.remove();  
  82.                    }  
  83.                });  
  84.                element.bind("keydown", function (e) {  
  85.                    var key;  
  86.                    key = e.which;  
  87.                    if (key === 9 || key === 13) {  
  88.                        e.preventDefault();  
  89.                    }  
  90.                    if (key === 8) {  
  91.                        return $scope.$apply('deleteTag()');  
  92.                    }  
  93.                });  
  94.                return element.bind("keyup", function (e) {  
  95.                    var key;  
  96.                    key = e.which;  
  97.                    if (key === 9 || key === 13 || key === 188) {  
  98.                        e.preventDefault();  
  99.                        return $scope.$apply('addTag()');  
  100.                    }  
  101.                });  
  102.            },  
  103.            template: "<div class='tag-input-ctn'><div class='input-tag' data-ng-repeat=\"tag in tagArray()\">{{tag}}<div class='delete-tag' data-ng-click='deleteTag($index)'>×</div></div><input type='text' data-ng-style='{width: inputWidth}' data-ng-model='tagText' placeholder='{{placeholder}}'/></div>"  
  104.        };  
  105.    });  
Output

 

For the complete source code, please see https://github.com/m-hassan-tariq/EmailInputTokenizerAngularJSDirective.


Similar Articles