Vikram Naidu: EXPRESSIONS & FILTERS

EXPRESSION & FILTERS EXAMPLE
<html ng-app="myApp">
<body ng-controller="myCtrl">
<table border=1>
<caption>STUDENT DETAILS</caption>
<tr>
<td>FIRST NAME</td>
<td>{{student.fn | uppercase}}</td>
</tr>
<tr>
<td>LAST NAME</td>
<td>{{student.ln | lowercase}}</td>
</tr>
<tr>
<td>ROLL NO</td>
<td>{{student.rn}}</td>
</tr>
<tr>
<td>FULL NAME</td>
<td>{{student.fullName()}}</td>
</tr>
<tr>
<td>FEES</td>
<td>{{student.qty * student.price | currency: "₹"}}</td>
</tr>
<tr>
<th colspan=2>STATE DETAILS</th>
</tr>
<tr>
<th colspan=2><input placeholder="Enter state filter text" ng-model="stateFilter"/></th>
</tr>
<tr>
<th>STATE CODE</th>
<th>STATE NAME</th>
</tr>
<tr ng-repeat="s in student.states | filter: stateFilter | orderBy:'-key' | limitTo: 5">
<td>{{s.key}}</td>
<td>{{s.name}}</td>
</tr>
</table>
<script src="node_modules/angular/angular.js"></script>
<script>
angular.module("myApp", [])
.controller("myCtrl", function($scope){
$scope.student = {
fn: "Naresh",
ln: "Student",
rn: 1001,
fullName: function(){
return this.fn + " " + this.ln;
},
qty: 16,
price: 172549.50,
states: [{"key":"AN","name":"Andaman and Nicobar Islands"},{"key":"AP","name":"Andhra Pradesh"},{"key":"AR","name":"Arunachal Pradesh"},{"key":"AS","name":"Assam"},{"key":"BR","name":"Bihar"},{"key":"CG","name":"Chandigarh"},{"key":"CH","name":"Chhattisgarh"},{"key":"DH","name":"Dadra and Nagar Haveli"},{"key":"DD","name":"Daman and Diu"},{"key":"DL","name":"Delhi"},{"key":"GA","name":"Goa"},{"key":"GJ","name":"Gujarat"},{"key":"HR","name":"Haryana"},{"key":"HP","name":"Himachal Pradesh"},{"key":"JK","name":"Jammu and Kashmir"},{"key":"JH","name":"Jharkhand"},{"key":"KA","name":"Karnataka"},{"key":"KL","name":"Kerala"},{"key":"LD","name":"Lakshadweep"},{"key":"MP","name":"Madhya Pradesh"},{"key":"MH","name":"Maharashtra"},{"key":"MN","name":"Manipur"},{"key":"ML","name":"Meghalaya"},{"key":"MZ","name":"Mizoram"},{"key":"NL","name":"Nagaland"},{"key":"OR","name":"Odisha"},{"key":"PY","name":"Puducherry"},{"key":"PB","name":"Punjab"},{"key":"RJ","name":"Rajasthan"},{"key":"SK","name":"Sikkim"},{"key":"TN","name":"Tamil Nadu"},{"key":"TS","name":"Telangana"},{"key":"TR","name":"Tripura"},{"key":"UK","name":"Uttar Pradesh"},{"key":"UP","name":"Uttarakhand"},{"key":"WB","name":"West Bengal"}]
};
});
</script>
</body>

</html>

CUSTOM FILTERS IN ANGULARJS
<html ng-app="myApp">
<body>
ENTER NUMBER: <input ng-model="no"/><br>
VIEW ORDINAL NO: {{no | ordinal}}
<script src="node_modules/angular/angular.js"></script>
<script>
function ordinal(no){
if(!no || isNaN(no))
return "";
if(parseInt(no)>10 && parseInt(no)<=20){
return no+"th";
}
var lastDigit = no % 10;
var ordinalNo = no;
if(lastDigit == 1){
ordinalNo += 'st';
}
else if(lastDigit == 2){
ordinalNo += 'nd';
}
else if(lastDigit == 3){
ordinalNo += 'rd';
}
else{
ordinalNo += 'th';
}
return ordinalNo;
};
angular.module("myApp", [])
.filter("ordinal", function(){
return ordinal;
});
</script>
</body>

</html>

Vikram Naidu

Monday, November 20, 2017

EXPRESSIONS & FILTERS

No comments:

Post a Comment