使用ng-repeat的AngularJS SVG渲染顺序

Question

I'm having rendering order issues when trying to order or reverse a list of <g> elements using ng-repeat directive. Here's a plunkr to reproduce it: http://plnkr.co/edit/f2pgSq?p=preview

I'd like to use intensively Angular's orderBy and filter . What am I missing? Thanks in advance.

Answer 1

The problem is ng-attr-y="{{y + (item.id - 1) * (h + 6)}}" of <rect ng-repeat...> .

Change it to

ng-attr-y="{{y + $parent.$index * (h + 6)}}" 

What you want is to use the $index of the outer repeater instead of the id since the id s will get reversed.

Demo