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.
Related
We have a section of our website where users can submit data. This section allows users to add additional entries and submit them all at once. We had to rewrite this section after we updated the version of AngularJS the site used to the most recent. When a user first accesses the page, the first entry is ready and available for the user to fill out. They can click on a button and it will add another entry. These entries can be navigated via tabs. Once a second entry has been added and a radio button selected, the selected radio button on the first entry is deselected in the view. If you go back to the first entry and re-select a radio button, any selected radio button on the second entry is de-selected. Checking the model, the values are still stored and if the user saves, then the correct values are saved to the database. I don't know if it matters in this case, but the radio button options are populated via data from the database. Everything in the controller appears to be working correctly.
Here is a concentrated bit from the template:
<uib-tabset active="activeTabIndex" ng-show="!nothingToShow && showThisStuff">
<uib-tab ng-repeat="entry in things.items" active="{{entry.active}}" ng-model="entry">
<uib-tab-heading>Heading Here</uib-tab-heading>
<div>
<!-- some other stuff here -->
<div>
<label>Label Here</label>
<br />
<div ng-repeat="input in inputTypes">
<input name="inputTypes" type="radio" data-ng-value="input.theTypeId" ng-model="entry.theTypeId">
<label>{{input.localizedName | translate}}</label>
</div>
</div>
<!-- More stuff here-->
</div>
</uib-tab>
</uib-tabset>
I have a feeling that I'm not doing something right since ng-repeat is involved, but I feel that since the selection points to entry that multiple entries should be isolated from each other. Very well could be wrong, though.
Here's a list of things I've looked at to try and resolve this issue:
AngularJS - ng-repeat multiple radio button groups, values to array
AngularJS - Using ng-repeat to create sets of radio inputs
AngularJs: Binding ng-model to a list of radio buttons
AngularJS multiple radio options
Selected value in radio button group not retained in angularjs
How can I get the selected values of several radio buttons to be bound to an object (model)?
If I understand you correctly, you try to set multiple selection instead of single selection, do you?
Try one of the following: either remove the 'name' attribute from the input, or use $index in order to give every input its unique name (example: name="inputTypes_{{$index}}").
I have a contenteditble div, that I want to reset on blur if it's empty (i.e. if you delete everything and then click outside, it will discard the changes).
If you delete everything but retain focus, then I want it to show a placeholder.
The code below is almost working, but when I delete the last character in the contenteditble div, it's firing the ng-blur event, even though the div still has focus.
<div ng-model="question.QuestionTitle" contenteditable placeholder="Add Question Title"
ng-blur="saveQuestionnaireTitle(question)"></div>
So, when you delete the last character in the div, the placeholder shows for a split second, and then my code inside "saveQuestionnaireTitle" fires, which checks for an empty string repopulates the box - so even though the user hasn't clicked out of the box.
The div appears to loose then quickly regain focus.
Any ideas?
We have inputs with placeholders like this:
<input placeholder="Search..." type="text" />
Everything is fine in chrome/firefox, but in IE sometimes when we are hiding and showing the element, the placeholder becomes the input value -- you click on the input and your cursor is after the 3 dots of
"Search...(blinking cursor here)"
The inputs are in an angularJS ngView and we use ngShow and ngHide to show/hide them based on various logic.
When the view first renders you can click in the input and it removes the placeholder as expected, but after the input is hidden and then shown once or twice the problem starts.
We have even tried recreating the browsers html5 placeholder behaviour with javascript, binding to its blur/focus events and using the inputs value but we actually get the same behavior attempting doing them that way too.
We originally tried to use a placeholder.js thinking it was related to IE 8 or less not being great with html5... but we get this issue in up to IE11 as well.
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"
>
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.