ng-repeat track by | filter

[Alex Figueiredo]

I'm using the unstable version 1.1.5 and my | filter:expression won't work.

My filter works when I don't have any duplicates in my list, but this is not my scenario.

With duplicates and track by (doesn't work)

http://jsfiddle.net/nJu9A/

Working without track by:

http://jsfiddle.net/nJu9A/1

What am I doing wrong?

[Brian Marco]

Hey Alex,

I think I'm seeing the same thing.  ATM I've tried to look at what's happening in the angular filter code.

From what I can see:

- When you don't use the "track by" feature, the angular code works.  Specifically, the "filterFilter" function (starting at line 10843 in the uncompressed 1.1.5 version) gets an array as expected input.

- When you DO use the "track by" feature, the "filterFilter" function no longer receives an array as it's first input.  From what I can see I think it's getting invoked multiple times with each index of the array.

Will look into this further later this evening / tomorrow to see what I else I can find.

--

B

[Brian Marco]

Hey Alex,

I think I may have figured out what's going on.  From what I can tell the logic in angular that is trying to make sense of the expression given to ng-repeat runs into problems when there is text after  "track by _track_by_function_".  In your example a pipe to filter.  I've put up the following jsfiddle with a modified angular.js that I think solves your problem.  Can you give a spin and let me know what you think?

http://jsfiddle.net/brianmarco/w5cV5/

The fix that I whipped up is still quite a WIP (e.g. needs a unit test).  I've also attached my hacked up angular.js in case you want to try it locally.  It's uncompressed and based off of 1.1.5.

--

B

On Wednesday, June 19, 2013 2:36:28 PM UTC-4, Alex Figueiredo wrote:

[Alex Figueiredo]

Hi Brian,

Thanks for your help. I'm going to make some tests and let you know!

I can do it right now, but I think I'll be able to do it tomorrow.

Thank you

[Martin Lepadusch]

Hi Brian,

thx for your WIP fix. I think i run into the same problem. Your fix solves the problem for me with one pipe after "track by" but i have a second pipe. So i replaced line 15347 in your attached version with the following line:

match = expression.match(/^\s*(.+)\s+in\s+(.*)\s*track\s+by\s+([^|]+)\s*(\|.*)+$/);

At first glance this seems to fix my problem with two pipes after "track by".

[Brian Marco]

Hey Martin,

Tx for trying out and sending me your feedback regarding this issue.

You're right, the first version of my fix had problems with subsequent pipes (e.g. filter:search | orderBy:'foo').  I did manage to tweak my original fix since I posted it and actually submitted a pull request with my final result.  For reference here's my pull request:

https://github.com/brianmarco/angular.js/commit/09eb6daa4e6f5ac41fa0688a9308994ae99a2c8c

Can you give that one a try if you get a chance to see if it handles your needs?

From what I could see from your updated pattern I think it might run into issues when "track by" is missing.

Tx,

--

B

[Martin Lepadusch]

Hi Brian,

for my use case your PR works fine with two pipes. Thx

[Brian Marco]

Great!  Tx for taking the time to validate Martin.

--

B

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/m-1rW9eiiCM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

--

B

[a.su...@gmail.com]

Hi

I ran into the same issue doing some tests with angular.

What I want to do is to filter an array of number/string items by an input value. My code is someething like this.

It works well if $scope.groups[#].numbers is an array of objects, the filter search through the properties of objects. however I want to filter my simple  array of simple values in the case is being tracked by $index.

Is that possible, any workaround on this?

View a working copy on jsfiddle http://jsfiddle.net/u9y9h/

<div ng-app>

<div ng-controller="repeater">

  <input placeholder="number" type="text" ng-model="number">

  <input type="button" ng-click="addItem()" value="Add item"><br>

  <input placeholder="query"  type="text" ng-model="query">

  <div ng-repeat="group in groups">

    <h3>{{group.title}}</h3>

    <ul>

      <li ng-repeat="item in group.numbers track by $index | filter:query">{{item}}</li>

    </ul>      

  </div>

</div>

</div>

function repeater($scope) {

  $scope.items = [];

  $scope.groups = [{

    title: 'even',

    numbers: []

  }, {

    title: 'odd',

    numbers: []

  }];

  $scope.addItem = function () {

    if ($scope.number % 2 == 0) {

      $scope.groups[0].numbers.push($scope.number);

    } else {

      $scope.groups[1].numbers.push($scope.number);

    }

    $scope.number = '';

  }

}

[Estefano Castañeda]

This is a solution :D

http://jsfiddle.net/w5cV5/1/

[Taylor Gautier]

That solution works, however, I am trying to also do the same thing but make the list dynamically reversible - so how do you also an orderBy filter controlled by a variable for reversed or not?  

I tried:

c in menu.categories | filter:search | orderBy:'$index':reverse track by $index

and several variations to no avail...

[Estefano Castañeda]

that's a solution with sorting and filter using orderBy and filter XD

and keeping the checks in every item of list

http://jsfiddle.net/tRxzr/350/