https://github.com/normandy72/custom-filters
Creating Custom Filters with AngularJS. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
https://github.com/normandy72/custom-filters
angular angularjs html html5 javascript js
Last synced: about 1 month ago
JSON representation
Creating Custom Filters with AngularJS. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
- Host: GitHub
- URL: https://github.com/normandy72/custom-filters
- Owner: Normandy72
- Created: 2023-01-05T13:27:26.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T15:00:30.000Z (over 3 years ago)
- Last Synced: 2025-03-04T08:44:56.745Z (over 1 year ago)
- Topics: angular, angularjs, html, html5, javascript, js
- Language: JavaScript
- Homepage:
- Size: 66.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Steps to create custom filters
#### Step 1
Define Filter Factory Function
```
function customFilterFactory(){
return function(input){
// change input
return changedInput;
};
}
```
#### Step 2
Register Filter Factory With Module
```
angular.module('app', [])
.controller('ctrl', Ctrl)
.filter('custom', customFilterFactory);
```
#### Step 3 (Javascript)
Inject it with *name*Filter
```
Ctrl.$inject = ['$scope', 'customFilter'];
function Ctrl($scope, customFilter){
var msg = 'Some input';
customFilter(msg);
};
```
***
### Steps to create custom filter that accepts additional custom arguments
#### Step 1
Define Filter (Factory) Function with custom arguments
```
function customFilterFactory(){
return function(input, arg1){
// change input
return changedInput;
};
}
```
#### Step 2
Register Filter (Factory) Function with custom arguments
```
angular.module('app', [])
.controller('ctrl', Ctrl)
.filter('custom', customFilterFactory);
```
#### Step 3 (Javascript)
Inject it with *name*Filter
```
Ctrl.$inject = ['$scope', 'customFilter'];
function Ctrl($scope, customFilter){
var msg = 'Some input';
customFilter(msg, 'some value');
};
```
#### Step 3 (HTML)
Use it as registered name
```
{{ "Hello" | custom }}
```
If it nessessory - pass extra arguments with `: arg`
```
{{ "Hello" | custom : arg1 : arg2 }}
```
If it nessessory - chaining filters in HTML
```
{{ "Hello" | custom | uppercase }}
```