MOCKSTACKS
EN
Questions And Answers

More Tutorials









Angular Filters


Occasionally you will want to access the result of your filters from outside the ng-repeat, perhaps to indicate the number of items that have been filtered out. You can do this using as [variablename] syntax on the ng-repeat.

<ul>
 <li ng-repeat="item in vm.listItems | filter:vm.myFilter as filtered">
 {{item.name}}
 </li>
</ul>
<span>Showing {{filtered.length}} of {{vm.listItems.length}}</span>

Custom filter to remove values


A typical use case for a filter is to remove values from an array. In this example we pass in an array and remove any nulls found in it, returning the array.

function removeNulls() {
 return function(list) {
 for (var i = list.length - 1; i >= 0; i--) {
 if (typeof list[i] === 'undefined' ||
 list[i] === null) {
 list.splice(i, 1);
 }
 }
 return list;
 };
}


That would be used in the HTML like

{{listOfItems | removeNulls}}

or in a controller like

listOfItems = removeNullsFilter(listOfItems);

Custom filter to format values


Another use case for filters is to format a single value. In this example, we pass in a value and we are returned an appropriate true boolean value.

function convertToBooleanValue() {
 return function(input) {
 if (typeof input !== 'undefined' &&
 input !== null &&
 (input === true || input === 1 || input === '1' || input
 .toString().toLowerCase() === 'true')) {
 return true;
 }
 return false;
 };
}


Which in the HTML would be used like this:

{{isAvailable | convertToBooleanValue}}

Or in a controller like:
var available = convertToBooleanValueFilter(isAvailable);



Conclusion

In this page (written and validated by ) you learned about AngularJS Filters . What's Next? If you are interested in completing AngularJS tutorial, your next topic will be learning about: AngularJS Custom filters.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.