angularjs - Can I reprogram $index in an ng-repeat if there's a sort involved? -

i have ng-repeat looks this:

<div ng-repeat="row in phs.phrasesview = (phs.phrases | orderby:phs.phrasesorderby[phs.phrasesorderbyid].key:phs.phrasessortdirectionid == 1)">    <div>row.keyval</div>    <div>row.guid</div>    <input ng-model="phs.phrases[$index].posid" />    ...    more display columns here    ... 

the problem sorting changes $index posid displays in between divs based on $index after sorting.

is there way can have ng-model set correct value when using sort this?

note every row has guid. not sure if helps perhaps of use.

edit: updated answer after learning more ng-repeat, changed example data structure

can reprogram $index in ng-repeat if there's sort involved?

the short answer no.

tldr; based on have explained, <input ng-model="row.posid" /> should want. also, think re-organizing data structure little.

begin long-winded explanation:

because can't reprogram it, relying on $index when using filter on ng-repeat bad idea because not keep track of order of original list of items being filtered. in other words, run unexpected behavior when doing like:

   <input ng-model="phs.phrases[$index].posid" />     normal result    desired filtered result    actual filtered result    -------------    -----------------------    ----------------------    a,1  $index=0     c,3 $index=2              c,3 $index=0    b,2  $index=1     b,2 $index=1              b,2 $index=1    c,3  $index=2     a,1 $index=0              a,1 $index=2 

for use $index for, should use unique identifier instead. however, in particular case, don't need use unique identifier. so, if data structure similar to:

$scope.phs={}; $scope.phs.phrasesorderbyid ="1"; $scope.phs.phrasessortdirectionid="1"; $scope.phs.phrases = [     {"guid":"0", "keyval":"a", "posid":"x"},     {"guid":"1", "keyval":"b", "posid":"y"},     {"guid":"2", "keyval":"c", "posid":"z"} ]; $scope.phs.phrasesorderby = [     {"key":"1"},     {"key":"2"},     {"key":"3"} ]; 

i suggest immediate solution:

<div ng-repeat="row in phs.phrasesview = (phs.phrases | orderby:phs.phrasesorderby[phs.phrasesorderbyid].key:phs.phrasessortdirectionid == 1)">     <div>{{row.keyval}}</div><!-- don't forget interpolate {{}} -->     <div>{{row.guid}}</div><!-- don't forget interpolate {{}} -->     <input ng-model="row.posid" />    ... </div 

the reason assumed data structure because have references 2 different arrays inside phs object: phs.phrases , phs.phrasesorderby.

the way have data structure, <input ng-model="row.posid" /> should work because ng-repeating on phs.phrasesview (which filteredphs.phrases) , getting rows it.

extra

you know data better me, if there no reason have 3 separate arrays, improve code readability if combined arrays 1 so:

$scope.phs={}; $scope.phs.phrasesorderbyid ="1"; $scope.phs.phrasessortdirection="1"; $scope.phs.phrases = [     {"guid":"0", "keyval":"a", "posid":"x", "key":"1"},     {"guid":"1", "keyval":"b", "posid":"y", "key":"2"},     {"guid":"2", "keyval":"c", "posid":"z", "key":"3"} ]; 

if keep using 2 arrays have, i'd expect run problems if out of sync (aren't filtered same way).having 1 array makes easier understand code, , prevents effort keep 2 arrays in sync. code this:

<div ng-repeat="row in phs.phrases = (phs.phrases | orderby:phs.phrases[phs.phrasesorderbyid].key:phs.phrasessortdirectionid == 1)">     <div>row.keyval</div><!-- don't forget interpolate {{}} -->     <div>row.guid</div><!-- don't forget interpolate {{}} -->     <input ng-model="row.posid" />     ... </div