AngularJS - create dynamic filter which changes with each ng-repeat iteration

Question

I have a list of regions, and each region has a drop-down list that should show only the cities in that particular region. I used a nested ng-repeat for this:

<li ng-click="filter_region($event)" ng-repeat="region in regions">
       <span>{{region.region}}</span>
    <ul class="cityFilter" >
            <li ng-repeat="city in cities | filter:cityList">
                <input type="checkbox" value="{{city.id}}" ng-model="city.checked" ng-checked="city.checked">
                <span>{{city.city}}</span>
            </li>
        </ul>
  </li>

I need cityList as a dynamic filter. Each city should be filtered based on the current region. i.e. the region value needs to change with each iteration of the outer loop

pseudo-code for the filter:

$scope.cityList = function (item) {
            if (item.region_id == myDynamicRegion) 
                return true;
            return false;
        }

Is it doable?

please put code on jsfiddle/plunker

Nitish Kumar
– Nitish Kumar

2013-10-08 11:00:14 +00:00
Commented Oct 8, 2013 at 11:00 — Nitish Kumar
– Nitish Kumar, Commented Oct 8, 2013 at 11:00

Bas Slagter · Accepted Answer · 2013-10-08 10:57:47Z

1

Yes, it is doable. You can pass arguments to your filter:

<div ng-repeat="item in items |filter:x"></div>

And the filter:

 yourApp.filter('filter', function () {
        return function (item, x) {
            // Do the magic.
        };
 });

answered Oct 8, 2013 at 10:57

Bas Slagter

9,9479 gold badges50 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matanya Over a year ago

Where do I manipulate the value to match the current region? I need the value to change for each iteration

Bas Slagter Over a year ago

Can't you pass the region to the filter and show/hide the city based on that region?

Collectives™ on Stack Overflow

AngularJS - create dynamic filter which changes with each ng-repeat iteration

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related