Filters are used to modify the data. They can be used in expression or directives using pipe (|) character. We can use angularjs built in filters or can create filters in angularjs.
There are some commonly used filters in angularjs
uppercase
converts a text to upper case text.
lowercase
converts a text to lower case text.
currency
formats text in a currency format.
filter
filter the array to a subset of it based on provided criteria.
orderby
orders the array based on provided criteria.
Installing AngularJS in Website
To Install angularjs paste the script in head tag of your website layout
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Using built in Filters in AngularJS
<div ng-app = "mainApp" ng-controller = "studentController">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td><input type = "text" ng-model = "student.lastName"></td>
</tr>
<tr>
<td>Enter fees: </td>
<td><input type = "text" ng-model = "student.fees"></td>
</tr>
<tr>
<td>Enter subject: </td>
<td><input type = "text" ng-model = "subjectName"></td>
</tr>
</table>
<br/>
<table border = "0">
<tr>
<td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td>
</tr>
<tr>
<td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td>
</tr>
<tr>
<td>fees: </td><td>{{student.fees | currency}}
</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<ul>
<li ng-repeat = "subject in student.subjects | filter: subjectName |orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
Create Filters in AngularJS
<div ng-app = "mainApp" ng-controller = "myController">
<div ng-bind-html="htmlData |safeAs"></div>
</div>
<script>
var mainApp = angular.module("mainApp", []);
/*controller*/
mainApp.controller('myController', function($scope) {
$scope.htmlData = "<p>Hello AngularJS";
});
/*filter*/
mainApp.filter('safeAs', ['$sce',
function($sce) {
return function (input, type) {
if (typeof input === "string") {
return $sce.trustAs(type || 'html', input);
}
console.log("trustAs filter. Error. input isn't a string");
return "";
};
}
]);
</script>
Using these methods you can make custom filters in angularjs.
See Also
How to Create Multiple Parameters Dynamic Routes in Laravel
Laravel 8 Multiple Database and Resource Routes with Controllers
Optimize Database Queries in Laravel
Thanks For Reading :)
Please give your comments :)
Please Must Visit My Website :)
Top comments (0)