Angular Js orderBy with input values

Question

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>

What does "the input will close out" mean? Also, naming a method (initiative) the same as a property (initiative) can end up being confusing in the long run. — Lex
– Lex, Commented Jun 26, 2018 at 18:05
As you can see the input will show/hide according to the value of show. What I mean by 'close out' is that it hides. — justcant
– justcant, Commented Jun 26, 2018 at 18:54
So your ng-blur is firing before you're done typing because the change in the value caused the list to be reordered thereby causing the input to lose focus? — Lex
– Lex, Commented Jun 26, 2018 at 18:56
That seems to make sense. But why does it fire a blur event without me clicking outside of the input? — justcant
– justcant, Commented Jun 26, 2018 at 19:01
Actually, I don't think that's what's happening. I'll add an answer with the explanation and a way to resolve it. — Lex
– Lex, Commented Jun 26, 2018 at 19:04

Lex · Accepted Answer · 2018-06-26 19:10:43Z

1

Here is what I believe is the sequence of events:

User types in input changing the value of char.initiative.
This causes the list to reorder via the ng-repeat.
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" />

answered Jun 26, 2018 at 19:10

Lex

7,2732 gold badges31 silver badges49 bronze badges

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

1 Comment

justcant Over a year ago

Yep, that did the trick. I wasn't aware of the ng-model-options directive until now. Everything works just as I need it to. Thanks for the help!

Collectives™ on Stack Overflow

Angular Js orderBy with input values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related