Angular json Custom Filter Function
Today, We want to share with you Angular json Custom Filter Function.
In this post we will show you AngularJS json Custom Filter example, hear for Built-In And Custom AngularJS Filters With Examples we will give you demo and example for implement.
In this post, we will learn about AngularJS Custom Filter with Example with an example.
What Is AngularJs Filter ?
Answer : The Selects a subset List of items from list items array and returns it as a generate new array.
-# This filter can be most useful when debugging data and filtering your applications.
-#in AngularJS , The json filter used to converts a JavaScript or js object into a JSON string.
-#The Angularjs filter functionality of AngularJS is often used to converts javascript object to string inside the display when you filtering users need to filter data a set of Results in a collection.
<div>
<div>
<table>
<tbody>
<tr>
<td>{{$index + 1}}</td>
<td>{{item.ItemCode}}</td>
</tr>
</tbody>
</table>
</div>
</div>
JavaScript File
function searchfilterCtrl($scope, $filter)
{
$scope.salesitems = [
{"ItemCode":"PRICE CAT-ITEM -A001","Description":"PRICE CAT ITEM - A001/0001 (PRICE CATEGORY) -WEIGHTED AVERAGE"},{"ItemCode":"PRICE CAT-ITEM -A002-FIFO","Description":"PRICE CAT ITEM - A002/0001 (PRICE CATEGORY) - FIFO "},{"ItemCode":"PRICE CAT-ITEM -A003-FIXEDCOST","Description":"PRICE CAT ITEM - A003/0001 (PRICE CATEGORY) -FIXED COST"},{"ItemCode":"PRICE CAT-ITEM -A004 -LIFO","Description":"PRICE CAT ITEM - A004/0001 (PRICE CATEGORY) -LIFO"},{"ItemCode":"FOC-ITEM -A001- WEIGHTED AVG","Description":"FOC ITEM - A001/0001 (FOC) -WEIGHTED AVERAGE"},{"ItemCode":"FOC-ITEM -A003 FIXED COST","Description":"FOC ITEM - A003/0001 (FOC) -FIXED COST"},{"ItemCode":"FOC-ITEM -A004 LIFO","Description":"FOC ITEM - A004/0001 (FOC) -LIFO"},{"ItemCode":"FOC-ITEM-A005 MOSTRECENT","Description":"FOC ITEM - A005/0001 (FOC) - MOST RECENT"},{"ItemCode":"CON-ITEM -A001- WEIGHTED AVG","Description":"CONSIGNMENT/LOCATION ITEM - A001/0001 -WEIGHTED AVERAGE"},{"ItemCode":"CON-ITEM -A003- FIFO","Description":"CONSIGNMENT/LOCATION ITEM - A003/0001 -FIFO"},{"ItemCode":"CON-ITEM -A004- LIFO","Description":"CONSIGNMENT/LOCATION ITEM - A004/0001 -LIFO"},{"ItemCode":"CON-ITEM -A005-MOSTRECENT","Description":"CONSIGNMENT/LOCATION ITEM - A005/0001 - MOST RECENT"},{"ItemCode":"BOM-ITEM -A001- WEIGHTED AVG","Description":"BOM ITEM - A001/0001 -WEIGHTED AVERAGE"},{"ItemCode":"BOM-SUB -A001- WEIGHTED AVG","Description":"BOM SUB ITEM - A001/0001 -WEIGHTED AVERAGE"},{"ItemCode":"BOM-ITEM -A003- FIXED COST","Description":"BOM ITEM - A003/0001 -FIXED COST"},{"ItemCode":"BOM-ITEM -A004- LIFO","Description":"BOM ITEM - A004/0001 - LIFO"},{"ItemCode":"BOM-ITEM -A005- MOSTRECENT","Description":"BOM ITEM - A005/0001 - MOST RECENT"},{"ItemCode":"BOM-REP -A001- WEIGHTED AVG","Description":"BOM REPLACEMENT ITEM - A001/0001 -WEIGHTED AVERAGE"},{"ItemCode":"BOM-REP -A002- FIFO","Description":"BOM REPLACEMENT ITEM - A002/0001 - FIFO"},{"ItemCode":"BOM-SUB -A002- FIFO","Description":"BOM SUB ITEM - A002/0001 -FIFO"},{"ItemCode":"BOM-SUB -A0022- FIFO","Description":"BOM SUB ITEM - A0022/0001 -FIFO"},{"ItemCode":"BOM-SUB -A003- FIXED COST","Description":"BOM SUB ITEM - A003/0001 - FIXED COST"},{"ItemCode":"BOM-SUB -A00111- WEIGHTED AVG","Description":"BOM SUB ITEM - A00111/0001 -WEIGHTED AVERAGE"},{"ItemCode":"BOM-SUB -A00222- FIFO","Description":"BOM SUB ITEM - A00222/0001 -FIFO"},{"ItemCode":"PRICECAT-ITEM -A005-MOSTRECENT","Description":"PRICE CAT ITEM - A005/0001 (PRICE CATEGORY) - MOST RECENT"},{"ItemCode":"FOC-ITEM -A002 FIFO","Description":"FOC ITEM - A002/0001 (FOC) -FIFO"},{"ItemCode":"CON-ITEM -A002- FIFO","Description":"CONSIGNMENT/LOCATION ITEM - A002/0001 -FIFO"},{"ItemCode":"NORMAL-ITEM -A003-FIXED COST","Description":"NORMAL ITEM - A003/0001 -FIXED COST"},{"ItemCode":"NORMAL-ITEM -A004-LIFO","Description":"NORMAL ITEM - A004/0001 -LIFO"},{"ItemCode":"NORMAL-ITEM -A005-MOSTRECENT","Description":"NORMAL ITEM - A005/0001 MOST RECENT"},{"ItemCode":"BOM-ITEM -A002- FIFO","Description":"BOM ITEM - A002/0001 -FIFO"},{"ItemCode":"BOM-SUB -A00444- LIFO","Description":"BOM SUB ITEM - A00444/0001 -LIFO"},{"ItemCode":"BOM-SUB -A00555- MOSTRECENT","Description":"BOM SUB ITEM - A00555/0001 - MOST RECENT"},{"ItemCode":"BOM-SUB -A00333- FIXED COST","Description":"BOM SUB ITEM - A00333/0001 - FIXED COST"},{"ItemCode":"MUOM-ITEM -A001-WEIGHTED AVG","Description":"MULTIUOM ITEM - A001/0001 -WEIGHTED AVERAGE"},{"ItemCode":"1ITEM A","Description":"ITEM A "},{"ItemCode":"123456789012345678901234567890","Description":"中文"},{"ItemCode":"Box","Description":"Box"},{"ItemCode":"BATCH ITEM","Description":"BATCH ITEM"},{"ItemCode":"NORMAL-ITEM -A001-WEIGHTED AVG","Description":"NORMAL ITEM - A001/0001 -WEIGHTED AVERAGE"},{"ItemCode":"NORMAL-ITEM -A002-FIFO","Description":"NORMAL ITEM - A002/0001 -FIFO"},{"ItemCode":"BOM-REP -A003- FIXED COST","Description":"BOM REPLACEMENT ITEM - A003/0001 -FIXED COST"},{"ItemCode":"BOM-REP -A004- LIFO","Description":"BOM REPLACEMENT ITEM - A00/0001 -LIFO"},{"ItemCode":"BOM-REP -A005- MOSTRECENT","Description":"BOM REPLACEMENT ITEM - A005/0001 - MOST RECENT"},{"ItemCode":"BOM-SUB -A0011- WEIGHTED AVG","Description":"BOM SUB ITEM - A0011/0001 -WEIGHTED AVERAGE"},{"ItemCode":"BOM-SUB -A0033- FIXED COST","Description":"BOM SUB ITEM - A0033/0001 - FIXED COST"},{"ItemCode":"BOM-SUB -A004- LIFO","Description":"BOM SUB ITEM - A004/0001 -LIFO"},{"ItemCode":"BOM-SUB -A0044- LIFO","Description":"BOM SUB ITEM - A0044/0001 -LIFO"},{"ItemCode":"BOM-SUB -A005- MOSTRECENT","Description":"BOM SUB ITEM - A005/0001 - MOST RECENT"},{"ItemCode":"BOM-SUB -A0055- MOSTRECENT","Description":"BOM SUB ITEM - A0055/0001 - MOST RECENT"},{"ItemCode":"MUOM-ITEM -A002-FIFO","Description":"MULTI UOM ITEM - A002/0001 -FIFO"},{"ItemCode":"MUOM-ITEM -A003-FIXED COST","Description":"MULTI UOM ITEM - A003/0001 -FIXED COST"},{"ItemCode":"MUOM-ITEM -A004-LIFO","Description":"MULTI UOM ITEM - A004/0001 - LIFO"},{"ItemCode":"MUOM-ITEM -A005-MOSTRECENT","Description":"MULTI UOM ITEM - A005/0001- MOST RECENT"}];
$scope.dataitems2 = $scope.salesitems;
$scope.$watch('filtersearch', function(valuedata)
{
$scope.salesitems = $filter('filter')($scope.dataitems2, valuedata);
});
};
Example : Basic usage of AngularJs Filters
demo : http://jsfiddle.net/hamsaya/a83c3h5x/
demo : http://jsfiddle.net/M8nDQ/
We hope you get an idea about Angular json Custom Filter Function
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.
We hope This Post can help you…….Good Luck!.
