AngularJS : Filters - Custom

Some custom filters in angularjs

by Sukanya Halder

HTML

<script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
<div class='description'>
  <h3>
custom filters
</h3>
  <h4>
Lowercase - to convert string to lower case<br/>
{{ expression | lowercase}}
</h4>
</div>

<div ng-app='myModule' ng-controller='myController'>
  <!-- Description
  <br /><span ng-model='description'>{{description|lowercase}}</span>
<span ng-module='description'>{{description|charCounter}}</span>-->
  <br /> Description
  <br />
  <textarea ng-model='description'>{{description}}</textarea>
  <br />
<span ng-module='description'>{{description|lowercase}}</span>
<span ng-module='description'>{{description|charCounter}}</span>
  <span ng-module='description'>{{description|wordCounter}}</span>
  <span ng-module='description'>{{description|encrypt}}</span>
  <textarea ng-module='message'>{{message}}</textarea>
  <span ng-module='message'>{{message|encrypt}}</span>
</div>

CSS

span {
  margin: 12px;
  background: yellow;
}

textarea {
  width: 450px;
  height: 100px;
}

a {
  font-family: verdana;
  font-weight: bold;
  font-size: 0.6em;
}

JavaScript

var app = angular.module('myModule', []);
app.filter('lowercase', function() {
  return function(input) {
    return input.toLowerCase();
  };
});
app.filter('charCounter', function() {
  return function(input) {
    return input.length;
  };
});
app.filter('wordCounter', function() {
  return function(input) {
  if(input.length==0) return 0;
  var regex = /\s\s+/g;
    return input.trim().replace(regex,' ').split(' ').length;
  };
});
app.filter('encrypt', function() {
  return function(input) {
 var encrypted = CryptoJS.AES.encrypt(input, "##1234");
//var decrypted = CryptoJS.AES.decrypt(encrypted, "Secret Passphrase");
    return encrypted.toString();
  };
});
app.filter('decrypt', function() {
  return function(input) { 
	var decrypted = CryptoJS.AES.decrypt(encrypted, "##1234");
    return encrypted.toString();
  };
});
app.controller('myController', ['$scope', function($scope) {
  $scope.date1 = 20161212;
  $scope.description = "DESCRIPTION IS ONE OF FOUR RHETORICAL MODES (ALSO KNOWN AS MODES OF DISCOURSE), ALONG WITH EXPOSITION, ARGUMENTATION, AND NARRATION.";
  $scope.message = "";
}]);