itanex: AngularJS Filter

Working on a project I came to need a formatting filter that would handle presenting GUID in the standard formats. I started by finding a way to validate and harvest the data from the GUID so that I would be able to format it as needed.

I utilized the following method to identify if the string presented would contain a valid GUID. I leveraged Regular Expressions to ensure full validation.

	function isValidGuid(input) {
	var re = /[{]?([0-9a-fA-F]{8})[-]?([0-9a-fA-F]{4})[-]?([0-9a-fA-F]{4})[-]?([0-9a-fA-F]{4})[-]?([0-9a-fA-F]{12})[}]?/g;

	return re.test(input);
	}

view raw isValidGuid.js hosted with ❤ by GitHub

Next I would need to harvest the different portions of the GUID so that I could use them to format it into the requested value.

	function guidPieces(input) {
	var re = /[{]?([0-9a-fA-F]{8})[-]?([0-9a-fA-F]{4})[-]?([0-9a-fA-F]{4})[-]?([0-9a-fA-F]{4})[-]?([0-9a-fA-F]{12})[}]?/g;

	var result = input.split(re);

	result.pop();
	result.shift();

	return result;
	}

view raw guidPieces.js hosted with ❤ by GitHub

Now that I have a way of testing and parsing out GUID content I can leverage the final need: Formatting as requested. What are the supported formats? I opened up MSDN and decided if C# supports a format I would want to support that display. Here is the content I found.

N - 32 digits:

00000000000000000000000000000000

D- 32 digits separated by hyphens:

00000000-0000-0000-0000-000000000000

B - 32 digits separated by hyphens, enclosed in braces:

{00000000-0000-0000-0000-000000000000}

P - 32 digits separated by hyphens, enclosed in parentheses:

(00000000-0000-0000-0000-000000000000)

X - Four hexadecimal values enclosed in braces, where the fourth value is a subset of eight hexadecimal values that is also enclosed in braces:

{0x00000000,0x0000,0x0000,{0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00}}

view raw guid.md hosted with ❤ by GitHub

MSDN C# Guid ToString()

So now I am ready to handle formatting the Guid in an Angular filter. The following code is my filter and you can see it in action over on my plunkr sample. I have no plans at this time to place this into a bower package, though I have already had requests for this.

	module.filter('guidformat', filter);

	filter.$inject = ['$filter'];

	function filter($filter) {
	return function(input, format) {
	if (input && typeof input !== 'string' \|\| !isValidGuid(input)) {
	return 'not a valid guid';
	}

	if (format === undefined \|\| format.length > 1) {
	format = 'D';
	}

	switch (format.toUpperCase()) {
	case 'N':
	return guidPieces(input).join('');
	case 'D':
	return guidPieces(input).join('-');
	case 'B':
	return '{' + guidPieces(input).join('-') + '}';
	case 'P':
	return '(' + guidPieces(input).join('-') + ')';
	case 'X':
	return toHexGuid(input);
	}

	return input;
	};
	}

view raw ng-guidformat.js hosted with ❤ by GitHub

Now the first four formats of a GUID are pretty straight forward. But the final hex version is a bit complicated. The code I have may not be the best in performance but it was what I could do to hash it all out. Here is that method.

	function toHexGuid(input) {

	var guid = guidPieces(input);
	var hex = [];

	hex.push('0x' + guid.shift());
	hex.push('0x' + guid.shift());
	hex.push('0x' + guid.shift());

	var remainder = guid.join('');
	hex.push([]);

	for (var i = 0; i < remainder.length; i += 2) {
	hex[3].push('0x' + remainder[i] + remainder[i + 1]);
	}

	hex[3] = '{' + hex[3].join(',') + '}';

	return '{' + hex.join(',') + '}';
	}

view raw toHexGuid.js hosted with ❤ by GitHub

Finally I just plop down my value in a databind and place the filter into it. By default the filter will use the D format.

	<html ng-app="app">

	<head>
	<title>Hello World</title>
	</head>

	<body>
	{{myguid \| guidformat:'B'}}
	</body>

	</html>

view raw index.html hosted with ❤ by GitHub

There you have it. A filter for presenting a GUID as you most likely will need.

itanex

Tuesday, December 22, 2015

AngularJS Filter - Format Guid

No comments:

Ajax Lesson