I am kind of stuck here. I have an application which uses bootstrap modal with couple of text boxes which has values from server. When i open the modal for the first time and remove the items from textbox ng-change event fires. Once all the fields are cleared, i closed the modal. When i opened the modal again it is populated with new values but when i remove the item from the textbox ng-change event is not triggered.
But here i found one more strange thing, the above mentioned problem occurs only if we have one item in textbox.
Here is my html code:
<tr>
<td>
<input only-numeric class="floatLeft" name="scoreSample" type="text" ng-model="scoreSample" id="scoreSample" ng-change="sampleMethod()" ng-model-onblur>
</td>
<td>
<input only-numeric class=" floatLeft" name="errorSample" type="text" ng-model="errorSample" id="errorSample" ng-change="sampleMethod()" ng-model-onblur>
</td>
</tr>
AngularJS code:
$scope.sampleMethod = function () {
alert("Coming here");
}
Thanks in advance.
Possible reasons for this happening are listed in the documentation:
The ngChange expression is only evaluated when a change in the input value causes a new value to be committed to the model.
It will not be evaluated:
if the value returned from the $parsers transformation pipeline has not changed
if the input has continued to be invalid since the model will stay null
if the model is changed programmatically and not by a change to the input value
Note, this directive requires ngModel to be present.
Have you checked these things? Other than that I also think you should post the entire view and controller as it is very difficult to find an error in the snippet you posted already.
Related
I have a collection of people and I am creating a grid based on that collection using the ng-repeat
<tr class="odd gradeX" ng-repeat="person in ctrl.people" name="innerForm" ng-form>
two of the the data rows have input elements that have ng-blur on them
<td>
<input id="firstname_{{$index}}"
class="lower-grid-large-input"
ng-blur="ctrl.PersonBlur('FirstName', person, $event)"
ng-model="person.FirstName"
ng-change="ctrl.PersonChange('FirstName', person)" />
</td>
<td>
<input id="lastname_{{$index}}"
class="lower-grid-large-input"
ng-blur="ctrl.PersonBlur('LastName', person, $event)"
ng-model="person.LastName"
ng-change="ctrl.PersonChange('LastName', person)" />
</td>
When I go from First name to last name - by tabbing (not that it matters) the last name blur gets called, even though I just put focus on it and I have not left that input.
So essentially I get two blur calls when I leave the first name input. This is causing issues with disabling the tab keydown and some other issues with our implementation of sweet alerts.
Expected behavior
First name i change, edit or add - i tab off this input and the blur is called - some work happens behind the scenes - focus is now on the last name input.
I then do some work on the last name input - when i tab off that input its blur is called and some work is done behind the scenes on its data.
Current behavior
First name input some work is done - when I tab of this the blur is called - so work is done --- but the last name blur is also called - and that work is done as well. focus does move along to the last name input but that blur was called.
I would like to know how can I do autosave in a Kendo numeric textbox.
I create a little demo, I can do an autosave with normal input text, (autosave when lost focus or 2 sec without entering values), then I add a Kendo UI numeric textbox, works also when I enter some value or lost focus, but, when I change the value in the scrollbars , autosave don´t work.
http://plnkr.co/eD6XGqMkOp7AA1nPAXNu
<h4>Set Value</h4>
<p>
<input kendo-numeric-text-box ng-model="item.value" style="width: 100%;" required/>
</p>
What is missing?
Thank you.
Best regards.
jolynice
Kendo's NumericTextBox does not update the model on the Spin event (the event you are referring to, which fires when you press the up/down arrows).
I encountered the same, annoyed that ng-model was only updated on Blur. My fix was to trigger the Change event on Spin >> Updated Plunker
<input
kendo-numeric-text-box="myNumeric"
k-on-spin="myNumeric.trigger('change')"
ng-model="item.value" />
The Kendo docs offer a slightly different approach.
I have my code on Plnkr:
http://plnkr.co/edit/6wz4zub2sEOfhrqps0c8
The html code is quite simple:
<div ng-app="myApp" ng-controller="MainCtrl">
<div ng-dropdown-multiselect="" options="myData" selected-model="myModel" extra-settings="mySettings" events="myEvents"></div>
<div ng-repeat="item in Items">
<item-input></item-input>
</div>
</div>
</div>
Basically, the problem is my function in ng-if gets called every time I click anywhere on the page. I think it has something to do with the multi-select control but I'm not sure where I should fix it. Any help is appreciated.
Thanks.
UPDATED
What I don't really understand is why this behavior stops when I comment out the multi-select dropdown (<div ng-dropdown-multiselect="" options="myData" selected-model="myModel" extra-settings="mySettings" events="myEvents"></div>)?
As shown in the picture below, taken from Chrome DevTools, the multi-select dropdown is generating two click event handlers :
One event is on the button and one on the whole document. Therefore, a click on the document is triggering at least that last event handler, which potentially changes the model. Angular then do a digest cycle, and that implies that the displayMe function bound to the ngIf directive is evaluated in case the element should be removed of the DOM or not.
If you remove the dropdown component, and thus these two click handlers, you are left with 3 text inputs. Indeed, now there are no digest after a click on the document because no handler are executed, but you can still trigger digests essentialy by typing inside the input elements.
This answer by Miško Hevery has some valuable info about the dirty-checking process in Angular 1.x.
I have a checkbox that is updated from the model, but then the model is not updated clicking the checkbox.
Within a form I have:
<input type="checkbox" ng-model="acceptEula"> I have read the EULA and I agree
<button type="submit" ng-click="pay()" translate>Proceed to Pay</button>
{{acceptEula}}
Clicking the checkbox, I can see how {{acceptEula}} shows true or false, it works.
When I click the button, I put a breakdown in pay() function. $scope.acceptEula is always false. What could be the problem?
Sorry, the question was not detailed in order to simplify the problem. In reality, I used "ng-switch" in the form.
Finally I have found the problem: "This is a scope inheritance problem due to ng-switch creating it's own scope.". It is well explained at angularjs - ng-switch does not bind ng-model
The solution is to use dot in the model, for example $scope.form.acceptEula
As a code is better than 1000 words, I've created a plunker in order to show my problem:
http://bit.ly/1uiR2wy
Given the specific DOM element, thing is that I have an input checkbox with an ng-change, I want to add an ng-click to the li that wraps it in order to be able to click in the whole area.
This new ng-click makes the method in the ng-change to happens twice. And is even worse for an SPAN DESCRIPTION 2 that is happening 3 times.
<li class="odd" ng-click="changeToggleModel($event)">
<span class="overcomeDescription ellipsis-overflow">span description</span>
<label>
<span>SPAN DESCRIPTION 2</span>
<input type="checkbox" ng-change="toggleSelection($event)" ng-model="isSelected">
</label>
</li>
I've tried with stopPropagation and it seems that it doesn't solve the issue.
Any ideas about it?
If you check the plunker and open the console you'll see the issue perfectly.
Thanks in advance to everyone
You need to stop event propagation on label level. Try this:
<label ng-click="$event.stopPropagation()" ...>
Demo: http://plnkr.co/edit/AjD9GlA3zjxABix6hegg?p=preview
The reason why it happens is that the label (connected to corresponding checkbox) sort of generates one more click event in order to pass click to the input. This click event causes described strange issues, because it still bubbles like normal event (well it is normal event), and hence is detected by ngClick directives.
Late to the party but encountered the same issue- it seems like AngularJS propagates the click event separately and explicitly. Instead of stopping propagation on the label, you can catch it on the input explicitly:
<input
type="checkbox"
ng-click="$event.stopPropagation()"
ng-change="toggleSelection($event)"
ng-model="isSelected"
>