0

I have a table created with ng-repeat and I want to execute some action after I change quantity from one value to another (and also it would be nice to have original value before the change). I tried using ng-change="myFunction(result, {{result.modelValue}})" but the problem is that this event is triggered by every keystroke and so I typed, say, 7 and actually want to type 70, but the event already happened. I also tried ng-blur, but then nothing happened at all (my function was not even called). Note, that I also have ng-click in the ng-repeat.

Do you know which event should I attempt to hook to and what is the best way to trace original value before the change (also, the complication is that I'm in the ng-repeat loop).

This is my current html (also, looks like it may have been a typo in my original code):

<td ng-if="result.isMatrix===false">

                                    <div class="input-field-line-items">
                                        <input type="number" name="quantity"
                                               ng-model="result.quantity"
                                               ng-disabled="crud.model.status===3"
                                               class="form-control form-control-sm text-right"
                                               ng-mouseleave="crud.quantityChanged(result)"
                                               ng-class="{'input-has-error' : (result.quantity===null || lineItemForm.quantity.$error.max || lineItemForm.quantity.$error.min) && lineItemForm.quantity.$dirty}"
                                               min="0"
                                               max="2147483647" />

                                      </div>
                                </td>

Based on the suggestions given I was almost able to get all working but I just found a case where my code doesn't work. This happens when I type bad value (say, -10). In this case I see an error in console. Here is my current html:

<div class="input-field-line-items">
                                        <input type="number" name="quantity"
                                               ng-model-options="{ updateOn: 'blur' }"
                                               ng-model="result.quantity"
                                               ng-disabled="crud.model.status===3"
                                               class="form-control form-control-sm text-right"
                                               ng-change="crud.quantityChanged(result, {{result.quantity}})"
                                               ng-class="{'input-has-error' : (result.quantity===null || matrixLineItemForm.quantity.$error.max || matrixLineItemForm.quantity.$error.min) && matrixLineItemForm.quantity.$dirty}"
                                               min="0"
                                               max="2147483647" />
                                    </div>

And this is the error I'm seeing after typing a negative value:

angular.js?v=hfDjvhqzZ7xKaOtdmnQ3FhY12ud2J6HVALMF-ee3YJo1:14525 Error: [$parse:syntax] Syntax Error: Token ')' not a primary expression at column 30 of the expression [crud.quantityChanged(result, )] starting at [)]. http://errors.angularjs.org/1.6.4/$parse/syntax?p0=)&p1=not%20a%20primary%20expression&p2=30&p3=crud.quantityChanged(result%2C%20)&p4=)

What should I change in the above to fix this issue?

I found the following thread which seems relevant but a bit above my head and I'd rather not introduce new directives into this mix if possible:

How to use the last valid modelValue if a model becomes invalid?

Naomi
  • 718
  • 1
  • 9
  • 28
  • please share code what you tried so far – Naga Sai A Dec 20 '18 at 17:14
  • I added code into my post (just the html part), but when I was looking at it I noticed a typo in ng-blur (b was missing). It could have been the reason for my problem and if yes, sorry about it. – Naomi Dec 20 '18 at 17:16
  • 3
    Take a look at using [`ngModelOptions`](https://docs.angularjs.org/api/ng/directive/ngModelOptions) – charlietfl Dec 20 '18 at 17:21
  • 1
    ng-blur should work , if move focus away from that input field after entering - https://codepen.io/nagasai/pen/xmgmOr – Naga Sai A Dec 20 '18 at 17:26
  • I like both options answers, I think I'm going to try ng-change(result, {{result.value}}) and ng-options now. Thanks. – Naomi Dec 20 '18 at 17:28
  • You could implement `myFunction` so it debounces the input. It’s a pretty common case. Check out https://davidwalsh.name/javascript-debounce-function – dnak Dec 20 '18 at 18:13
  • 1
    @dnak Why would you implement a function when debounce is built directly into AngularJS? – Lex Dec 20 '18 at 18:17
  • True. ngModelOptions has debounce built in. – dnak Dec 20 '18 at 18:19
  • Using ngModelOptions and my original ng-change worked fine for me. Thanks for reminding about ngModelOptions. – Naomi Dec 20 '18 at 19:50
  • Ok, I thought I had it working, but I just found a problematic case that produces an error in console. I'm adding it to my original message and would appreciate help of how to get the previous value of the control before the change took place. – Naomi Dec 26 '18 at 18:58

0 Answers0