forked from pepesan/angularjs001
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
137 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,131 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<title>Title</title> | ||
<script src="js/angular.js"> | ||
</script> | ||
</head> | ||
<body ng-app="app" ng-init="numero=14,cadena='micadena'"> | ||
<h1>{{numero |ordinal}}</h1> | ||
|
||
<script> | ||
var app=angular.module("app",[]); | ||
// Setup the filter | ||
app.filter('ordinal', function() { | ||
|
||
// Create the return function | ||
// set the required parameter name to **number** | ||
return function(number) { | ||
|
||
// Ensure that the passed in data is a number | ||
if(isNaN(number) || number < 1) { | ||
|
||
// If the data is not a number or is less than one (thus not having a cardinal value) return it unmodified. | ||
return number; | ||
|
||
} else { | ||
|
||
// If the data we are applying the filter to is a number, | ||
// perform the actions to check it's ordinal suffix and apply it. | ||
|
||
var lastDigit = number % 10; | ||
|
||
if(lastDigit === 1) { | ||
return number + 'st' | ||
} else if(lastDigit === 2) { | ||
return number + 'nd' | ||
} else if (lastDigit === 3) { | ||
return number + 'rd' | ||
} else if (lastDigit > 3) { | ||
return number + 'th' | ||
} | ||
|
||
} | ||
} | ||
}); | ||
</script> | ||
<h1>{{cadena | capitalize:3}}</h1> | ||
<script> | ||
// Setup the filter | ||
app.filter('capitalize', function() { | ||
|
||
// Create the return function and set the required parameter as well as an optional paramater | ||
return function(input, char) { | ||
|
||
if (isNaN(input)) { | ||
|
||
// If the input data is not a number, perform the operations to capitalize the correct letter. | ||
var char = char - 1 || 0; | ||
var letter = input.charAt(char).toUpperCase(); | ||
var out = []; | ||
|
||
for (var i = 0; i < input.length; i++) { | ||
|
||
if (i == char) { | ||
out.push(letter); | ||
} else { | ||
out.push(input[i]); | ||
} | ||
|
||
} | ||
|
||
return out.join(''); | ||
|
||
} else { | ||
return input; | ||
} | ||
|
||
} | ||
|
||
}); | ||
</script> | ||
<div class="container" ng-controller="demo"> | ||
<div class="row"> | ||
<div class="col-lg-6 col-lg-offset-3"> | ||
<div ng-app="filters"> | ||
<div ng-controller="demo"> | ||
<div class="panel panel-default"> | ||
<div class="panel-body"> | ||
<h4 class="text-center">AngularJS Filter - Static Languages</h4> | ||
<p><strong>Original:</strong></p> | ||
<ul class="list"> | ||
<li ng-repeat="lang in example1">{{lang.name}}</li> | ||
</ul> | ||
<p><strong>Static Language Filter:</strong></p> | ||
<ul class="list"> | ||
<li ng-repeat="lang in example1 | staticLanguage">{{lang.name}}</li> | ||
</ul> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<script> | ||
app.controller('demo', function($scope){ | ||
$scope.example1 = [ | ||
{name: 'C#', type : 'static'}, | ||
{name: 'PHP', type : 'dynamic'}, | ||
{name: 'Go', type : 'static'}, | ||
{name: 'JavaScript', type: 'dynamic'}, | ||
{name: 'Rust', type: 'static'} | ||
] | ||
}) | ||
|
||
app.filter('staticLanguage', function(){ | ||
return function(input){ | ||
var out = []; | ||
angular.forEach(input, function(language){ | ||
if(language.type === 'static'){ | ||
out.push(language) | ||
} | ||
}) | ||
return out; | ||
} | ||
}) | ||
</script> | ||
</body> | ||
</html> |