.NET

Email Tokenizer for AngularJS Directive

Introduction

While implementing Single Page Application through WebAPI and AngularJS, You came across number of times to use filters and directive in order to meet requirements specified by clients, below code snippet, tokenize input and display them in separate block within a specific placeholder, however it checks the input is valid email address first and then the input token is not repetitive within 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.   
  9. sample.directive('tagInput', function()   
  10. {  
  11.     return {  
  12.         restrict: 'E',  
  13.         scope: {  
  14.             inputTags: '=taglist',  
  15.             autocomplete: '=autocomplete'  
  16.         },  
  17.         link: function($scope, element, attrs)   
  18.         {  
  19.             $scope.defaultWidth = 200;  
  20.             $scope.tagText = '';  
  21.             $scope.placeholder = attrs.placeholder;  
  22.             $scope.tagArray = function() {  
  23.                 if ($scope.inputTags === #ff0000)  
  24.                 {  
  25.                     return [];  
  26.                 }  
  27.                 return $scope.inputTags.split(',').filter(function(tag)   
  28.                 {  
  29.                     return tag !== "";  
  30.                 });  
  31.             };  
  32.             $scope.addTag = function()   
  33.             {  
  34.                 var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;  
  35.                 var tagArray;  
  36.                 if ($scope.tagText.length === 0)   
  37.                 {  
  38.                     return;  
  39.                 }  
  40.                 if (!EMAIL_REGEXP.test($scope.tagText))   
  41.                 {  
  42.                     return $scope.tagText = "";  
  43.                 }  
  44.                 tagArray = $scope.tagArray();  
  45.                 if (!(tagArray.indexOf($scope.tagText) >= 0))   
  46.                 {  
  47.                     tagArray.push($scope.tagText);  
  48.                     $scope.inputTags = tagArray.join(',');  
  49.                 }  
  50.                 return $scope.tagText = "";  
  51.             };  
  52.             $scope.deleteTag = function(key)   
  53.             {  
  54.                 var tagArray;  
  55.                 tagArray = $scope.tagArray();  
  56.                 if (tagArray.length > 0 && $scope.tagText.length === 0 && key === #ff0000) {  
  57.                     tagArray.pop();  
  58.                 } else {  
  59.                     if (key !== undefined)   
  60.                     {  
  61.                         tagArray.splice(key, 1);  
  62.                     }  
  63.                 }  
  64.                 return $scope.inputTags = tagArray.join(',');  
  65.             };  
  66.             $scope.$watch('tagText', function(newVal, oldVal)  
  67.             {  
  68.                 var tempEl;  
  69.                 if (!(newVal === oldVal && newVal === undefined))   
  70.                 {  
  71.                     tempEl = $("<span>" + newVal + "</span>").appendTo("body");  
  72.                     $scope.inputWidth = tempEl.width() + 5;  
  73.                     if ($scope.inputWidth < $scope.defaultWidth)  
  74.                     {  
  75.                         $scope.inputWidth = $scope.defaultWidth;  
  76.                     }  
  77.                     return tempEl.remove();  
  78.                 }  
  79.             });  
  80.             element.bind("keydown", function(e)   
  81.             {  
  82.                 var key;  
  83.                 key = e.which;  
  84.                 if (key === 9 || key === 13)  
  85.                 {  
  86.                     e.preventDefault();  
  87.                 }  
  88.                 if (key === 8) {  
  89.                     return $scope.$apply('deleteTag()');  
  90.                 }  
  91.             });  
  92.             return element.bind("keyup", function(e)  
  93.             {  
  94.                 var key;  
  95.                 key = e.which;  
  96.                 if (key === 9 || key === 13 || key === 188)   
  97.                 {  
  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. });  

The output will be like
 
 
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs