<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x in names">
{{x | myFormat}}
</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
<p>Make your own filters.</p>
<p>This filter, called "myFormat", will uppercase every other character.</p>
</body>
</html>
// Code goes here
/* Styles go here */
<div>
w3s119-AngularJS Filter Custom
<br/>
code example:
<hr>
index.html
<br/>
<textarea
id='codeoutput'
style="width: 100%;height: 300px;background-color: #dffff4;
font-size: 1em;font-family: Verdana, Arial, Helvetica, sans-serif;
border: 1px solid black;">
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x in names">
{{x | myFormat}}
</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
<p>Make your own filters.</p>
<p>This filter, called "myFormat", will uppercase every other character.</p>
</body>
</html>
</textarea>
<hr/>
<iframe
allowfullscren="allowfullscren"
frameborder="0"
src="https://embed.plnkr.co/OLFjY7wnvNym90wjVdiF?show=preview"
style="height: 400px; width: 100%;">
</iframe>
<hr>
https://www.w3schools.com/angular/angular_filters.asp
<hr>
201603
</div>