AngularJS ng-repeat + ng-click+ dynamic filter

Question

I'm newbie in AngularJS and I've got this prob here that I guess it's may be simple but I couldn't shoot it down yet

I've got a filter garageFilter who searches a number from an array then, I create a li tag dynamic with ng-repeat from an Obj [] that I created throught an input[type:number] field.

Each li tag should have a ng-click event with this garageFilter filter and when I clicked on this li tag it has to search an element according to an item number in the filter. I've already have this filter working well with a li tag element in the view but this one is not created dynamicly as the others one that I need

<li data-ng-click="garageFilter={level:3}">Level 3</li>

for the dynamic li tag I've tried this

<li data-ng-repeat="level in levelNum track by $index" ng-click="garageFilter={level:{{level}}">Level {{level}}</li>

and the html creates this <li data-ng-repeat="level in levelNum track by $index" ng-click="garageFilter={level:5}" class="ng-binding ng-scope">Level 5</li>

but the filter doesn't work..

can anyone help me out?? please Thank you guys!

<li data-ng-repeat="lvl in levelNum track by $index" ng-click="garageFilter={level:lvl}">Level {{lvl}}</li>. — Michael
– Michael, Commented Mar 3, 2016 at 12:54
Hello Michael, it doesn't work that way.. it does not make the fetch or the filter on click — Codasko
– Codasko, Commented Mar 3, 2016 at 16:12
you were almost right Michael, just one thing left, passing it by as a function; thanks anyway — Codasko
– Codasko, Commented Mar 3, 2016 at 22:54
Post your solution as an answer, it might help someone else in the future. — Michael
– Michael, Commented Mar 4, 2016 at 7:53

Codasko · Accepted Answer · 2016-03-04 08:58:55Z

1

Searching around, I hit the right way. As I read:

the problem is because the ng-repeat create a new scope for each iteration. You are writing on the iteration scope

so the best way to face that is creating a function instead of the manual assignment

in my case:

in the app

 $scope.myGarageFilter = function(value){
      $scope.garageFilter = {level:value};
    }

html

 <span ng-repeat="lvl in levelNum">
    <li ng-click="myGarageFilter(lvl.num)">Level {{lvl.num}}</li>
 </span>

instead of :

<li ng-click="garageFilter={level:4}">Level 4</li>

answered Mar 4, 2016 at 8:58

Codasko

315 bronze badges

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

Collectives™ on Stack Overflow

AngularJS ng-repeat + ng-click+ dynamic filter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related