AngularJS custom filter example

Table of Contents

AngularJS tutorial:
- Example:
- Output:

In previous post, we have seen about angularJS inbuilt filter. In this post, we are going to how to create your own filters.

AngularJS tutorial:

Filters are used to format data in desired way.
For creating a filter , you need to attach it with the module.

angular.module('myApp')

.filter('customFilter', function () {

return function (input) {

if (input) {

return input;

}

};

});

Lets take example where we will convert string to upper case and replace “_” by space(” “).

Example:

Copy below text , open notepad , paste it and save it as angularJSCustomFilterExample.html and open it in the browser.

<!DOCTYPE html>

<html>

<head>

<title>Angular js</title>

var app = angular.module('myApp', []);

app.controller('java2blogContoller', function($scope) {

$scope.java2blogMsg = "Hello_from_Java2blog";

}).filter('java2blogFilter',function(){

return function( str ) {

return str.toUpperCase().replace(/_/g,' ');

}

});

</script>

</head>

<body>

</br>

{{java2blogMsg|java2blogFilter}} !!!

</div>

</body>

</html>

Output:

HELLO FROM JAVA2BLOG !!!

Was this post helpful?

Let us know if you liked the post. That’s the only way we can improve.

Author

PowerShell

04 January

PowerShell – Check If Variable Is Null

Table of ContentsUsing $null VariableUsing Conditional StatementUsing IsNullorEmpty() MethodUsing IsNullOrWhiteSpace() MethodUsing Null-Coalescing Operators Using $null Variable Use the $null variable with the -eq parameter to check whether a variable is equal to $null. [crayon-63b660a7973c1230601768/] [crayon-63b660a7973c7771540067/] The above code returned a Boolean value True which means a variable is equal to null. What is null? null […]

PowerShell

03 January

PowerShell – Get Filename from Path

Table of ContentsPowerShell – Get Filename From Specified PathUsing Split-Path CmdletUsing Get-Item CmdletUsing Get-ChildItem CmdletUsing GetFileName() MethodGetting Multiple File NamesWith ExtensionsWithout Extension PowerShell – Get Filename From Specified Path The location of a file on a system can be determined by its path. In PowerShell, there are several ways to get filename from path. Firstly, […]

PowerShell

01 January

PowerShell – Count Files in Folders

Table of ContentsCount Files in Folders in PowerShellCount Files in multiple Folders in PowerShellCount Files in Folders and Subfolders in PowerShellCount only folders inside folder in PowerShellCount Files by Extension in Folder in PowerShell Count Files in Folders in PowerShell We can use the Measure-Object cmdlet in different ways to meet our project requirements. However, […]

PowerShell

31 December

Check if Object has Property in PowerShell

Table of ContentsUsing the -match ParameterUsing -contains ParameterUsing if-else BlockUsing .Match() Function with if-else BlockUsing Get-Member Cmdlet Using the -match Parameter Use the -match parameter to check if an object has a property in PowerShell. [crayon-63b660a798785667284273/] [crayon-63b660a798789323466073/] Here, we used the -match parameter to check if the given object, which is $result in our case, […]

PowerShell

28 December

Create Empty File in PowerShell

Table of ContentsUsing New-Item CmdletUse the ni AliasUsing Out-File CmdletUsing the fsutil file CommandUsing Text EditorUsing echo CommandUsing for Loop Using New-Item Cmdlet Use the New-Item cmdlet to create an empty .txt file in PowerShell. [crayon-63b660a798cf4225763776/] [crayon-63b660a798cf8622260418/] We used the New-Item cmdlet with -Path, -Name, and -ItemType parameters to create an empty .txt file using […]

PowerShell

27 December

Run PowerShell as Another User

Table of ContentsUsing the runas CommandOpen the PowerShell as an AdministratorRun the runas commandUsing the Start-Process cmdlet with the Credential ParameterUI-Based SolutionScript-Based Solution Using the runas Command The runas command in PowerShell launches programs using credentials different from the current user. It provides users with limited privileges to execute commands or access resources available only […]

Comments

Anonymous says:

April 9, 2016 at 2:18 am

Very nice post… Thanks..

can you please tell me more about ——-> replace(/_/g,' ');
and whats g in it. or can refer some links to know about it.

thanks in advance

Reply

AngularJS custom filter example