I am facing one problem with textbox in angularjs.
When I am updating textfield data by some way(Like clicking button) then ng-change is not working. Please check plnkr
[https://plnkr.co/edit/32eE0ejSNBTkWJ4LVErR?p=preview][1]
When I am updating first name on button click ng-change is not firing, but when i am changing first name in textfield ng-change is getting fired
This behaviour is intended. It says this in the official 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
source
In your case, the last item in that list applies.
if the model is changed programmatically and not by a change to the input value
You'll have to use a watch in this case.
Related
I have some requirment which happen after the selecting from dropdown in combobox. But In some cases I getting default value. So for that which even i have to fier.
onchange and onselect is working when I select from the dropdown. But in my case I need event when Combo value is by default select.
So the change events don't fire when field's are created with a value so you will either have to run your post-change code after the init code (i.e. initComponent, constructor or render) or you could override the initValue method of the component and prevent it suspending those events on the initial value set.
Whether that's a good idea I'll leave up to you to decide!
Check out this Fiddle and the source file for the original code
I am using $dirty to check the changes in a form ,but if i type something in the input box and remove it, the $dirty is still true.Is there any solution or it will work like this.
That is by design. Any form becomes $dirty whenever the user interacts with it, and you cannot undo the interaction event. Though you can restore defaults, that is clearly not the same.
Consider using $watch to check whether new value is different from the default one, and $setPristine() to clear user input.
$dirty means The field has been modified one more time. for compare your model by your previous model you can use $watch in controller.
if your field is empty you have a solution must set required attribute and in your input tag and use below code set ng-validate of your form to novalidate and then use below code for compare:
formName.inputName.$dirty && formName.inputName.$error.required
$Dirty refers to the form field is modified and you want to check using $pristine
I have a text field that uses AngularUI's typeahead feature. It looks like this:
<input typeahead="eye for eye in autocomplete[column] | filter:$viewValue">
I'd like to force the user to select an option from the list that is generated. If they type something that is not on the list exactly as it appears, on blur (clicking outside of the text field), i'd like the value of the text field to reset to it's original value.
Is this functionality part of the typeahead directive, or will I need to extend it? I searched for about 10 minutes on google and stackoverflow, but couldn't find any relevant documentation.
Can anyone please point me in the right direction to accomplish this?
There is an attribute in the plugin to force existing values only: typeahead-editable="false". The default value is true.
Only the $modelValue is being set to empty when there is a wrong value selected, and this is actually necessary otherwise we would not be able to write anything. The $viewValue stays with the last text entered. You might be able to bind a blur event of your own to the field to reset the $viewValue?
Here is your JsFiddle with the selected value displayed: http://jsfiddle.net/ZjPWe/61/
You could also use the attribute typeahead-on-select which required a callback when a value is selected, but I am not sure it would work with typeahead-editable="false" because no value is being selected.
Introduction
I' m writing checkbox tree directive using angular. Part of the behaviour is when I check checkbox in the middle of the tree, I need to unset all ancestor checkboxes and set all descendant checkboxes (see screenshot, transparent checkboxes are unchecked in fact).
https://www.dropbox.com/s/yx1bzqsamunmjpx/Screenshot%20from%202014-08-25%2018%3A39%3A44.png?dl=0
I'm using:
itemScope.$watch('checked', function setCheckboxes(newValue, oldValue) { ... });
For descendants everything works fine. I forEach child checkboxes and set them a new value, which in turn fires events for their descendants and so forth.
Problem is with ancestors. If I set parent checked value to false, it triggers event which sets all children to false which is not desired.
Question starts here:
I need to find a way to update (ancestor checkbox) model without firing event I subscribed with $watch. I know one way to wrap new value assignment in setTimeout(fn, 1), but I think it's not cool. What's the correct way of doing this?
Thanks!
You could use the ngChange directive on the checkbox to kick off the correct behavior, rather than $scope.watch. From the docs:
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
I'm new to angular and I'm confused about needing to use $scope.$watch in the this very simple plunk in order to see my selection change. If the $watch is removed, the alert is not triggered. Should selection not be automatically bound when I select something and then the change event should trigger a digest and automatic watch?
You don't need $scope.$watch. You can simpy use ngChanged directive.
From Docs (emphasis mine)
Evaluate the given expression when the user changes the input. The expression is evaluated immediately, unlike the JavaScript onchange event which only triggers at the end of a change (usually, when the user leaves the form element or presses the return key). The expression is not evaluated when the value change is coming from the model.
DEMO