2

Okay so I'm doing some basic CRUD with AngularJS. Here's the view:

<table>
    <tr ng-repeat=="person in persons | orderBy:lastName">
        <td>
            {{person.firstName}}
        </td>
        <td>
            {{person.lastName}}
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
            <input ng-model="person.firstName">
        </td>
        <td>
            <input ng-model="person.lastName">
        </td>
        <td>
            <button ng-click="save(person)">Save</button>
        </td>
    </tr>
</table>

The problem is that as you type a new user into the inputs, the position of that row jumps around to where it fits alphabetically. Obviously I want this to happen, but only when the user is done typing and hits "save."

Captain Stack
  • 3,572
  • 5
  • 31
  • 56
  • 1
    Use a temporary variable for the new user, and only add it to the users list when "Save" is clicked. – Blackhole Apr 09 '15 at 18:31
  • Related other solution: [Updating the model only after loosing focus](http://stackoverflow.com/questions/24513027/updating-model-after-focus-is-lost-on-input-control) – ryanyuyu Apr 09 '15 at 18:32
  • Move the new user row into a separate tbody that isn't affected by the ng-repeat orderBy. – Kevin B Apr 09 '15 at 18:35
  • @ryanyuyu, unfortunately that solution requires AngularJS 1.3+ and we're on 1.2 for IE8 support. – Captain Stack Apr 09 '15 at 19:04
  • @CaptainStack ah that's too bad. You might consider editing that information into the question so others don't try to use the `ng-model-options`. [This question](http://stackoverflow.com/questions/14722577/how-to-let-ng-model-not-update-immediately) I think has an answer for 1.2. – ryanyuyu Apr 09 '15 at 19:14
  • @ryanyuyu Couldn't get that to work. A couple comments said it doesn't. Other answer is also for 1.3. I maybe have to just do something a little hackier to make this work. – Captain Stack Apr 09 '15 at 19:40
  • @CaptainStack man that is really too bad. I do suggest upvoting one of the relevant comments and/or downvoting the unhelpful answer so it's more clear that the "accepted" answer is no longer working. I wish you the best of luck. – ryanyuyu Apr 09 '15 at 19:43
  • @Blackhole I ended up doing your method. In my actual code it was a bit more complex, but it's fundamentally maintaining a new vs. existing array. I'll mark yours as the answer if you move your response to an answer rather than a comment. – Captain Stack Apr 09 '15 at 22:15
  • @CaptainStack I'll make a clean answer as soon as possible. – Blackhole Apr 10 '15 at 08:09

1 Answers1

1

You should update your binding of scope variable on blur, for that you should look at ng-model-options

I'd suggest that you should go for ng-model-options="{ updateOn: 'blur' }" for the field which is mentioned in orderBy filter

<input ng-model="person.lastName" ng-model-options="{ updateOn: 'blur' }>

Note

For this you need update angular to 1.3 +

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299