Menu
I have an ng-repeat filter that uses a <select> menu to filter through a bunch of countries.
For example:
<div class="col-md-3 col-sm-6" ng-repeat="item in listings | filter: { location: locationFilter }">
How can I make it so that if nothing is selected, it automatically shows ALL the countries? And only starts filtering once a particular country is selected?
I'm sure this is probably a simple question but I am quite new to this and couldn't find how to do it.
Thanks!
231
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
The ng-repeat values can be filtered according to the ng-model in AngularJS by using the value of the input field as an expression in a filter. We can set the ng-model directive on an input field to filter ng-repeat values.
The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
$first and $last It's common when using ng-repeat to add specific behavior to the first or last element of the loop, e.g. special styling around the edges. Instead, ng-repeat already supplies you with two ready boolean properties. $first is true for the first element, and $last is true for the last element.
If the filter expression returned undefined, then the filter would not apply. So, you could do something like the following:
<div ng-repeat="item in listings | filter:(!!locationFilter || undefined) && {location: locationFilter}">
{{item}}
</div>
(!!locationFilter handles '', falsy and undefined values)
plunker
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
