CODEWITHSUNDEEP
angularjs
justcant
justcant

Reputation: 109

Angular Js orderBy with input values

I'm having issues with the orderBy filter. The following code will order my initiative column just fine. When I type a value into the input, the filter automatically begins ordering the values just as I want it to.

However, if I type a value into the input that raises that character higher in the list the input will close out before I can finish typing that value.

If the value I type into the input drops the character lower down the list then that input does not close and allows me to finish typing my value.

Can anyone explain this behavior?

<tr ng-repeat="char in localChars | orderBy: '-initiative'">
    <td>{{char.name}}</td>
    <td ng-hide='show' ng-click='show = true'>{{char.initiative}}</td>
    <td ng-show='show'>
        <input ng-blur='initiative(char)' ng-model='char.initiative' type="text">
    </td>
</tr>

Upvotes: 1

Views: 145

Answers (1)

Lex
Lex

Reputation: 7194

Here is what I believe is the sequence of events:

  1. User types in input changing the value of char.initiative.
  2. This causes the list to reorder via the ng-repeat.
  3. The scope of the ng-repeat is re-initialized causing the local show variable to lose its value (remember, ng-repeat has its own scope).

To fix this you'll need to use ng-model-options to control when the model value actually gets updated. You can choose to update on blur or use a debounce. Here is how to update on blur (my recommendation). You can find info on debouncing at the link.

<input ng-blur="initiative(char)" 
       ng-model="char.initiative" 
       ng-model-options="{ updateOn: 'blur' }"
       type="text" />

Upvotes: 1

Related Questions