I hava this type of code:
<div ng-repeat="point in points">
<input type="text" ng-model="point.oy" onchange="angular.element(this).scope().changeLocation(point.name)">
<input type="text" ng-model="point.ox" onchange="angular.element(this).scope().changeLocation(point.name)">
<!--.... other inputs -->
</div>
What should I do to make the onchange function not run on the first bind on ng-model.
It means that function changeLocation() should run only if user change text input.
What you can do is bind a watcher to your scope variable point in order to listen for user changes after the initialization of point. ex.
$scope.$watchCollection('point' , function(newPoint , oldPoint){
//something
});
Related
I have two inputs that are part of a <form>. I'm trying to get the value of the input once one of them is changed (dpFin). The problem is that that inside the event when I get the value using var endDt = document.getElementById("dpFin").value; I'm getting not the new value, but the old value. How I can get the newly set values instead?
function compararFechas() {
var startDt = document.getElementById("dpInicio").value;
var endDt = document.getElementById("dpFin").value;
console.log(startDt);
console.log(endDt);
}
<div class="form-group col-md-6">
<label>Inicio:</label>
<div>
<input type="text" id="dpInicio" name="dpInicio" class="form-control datepicker-here" data-language='es' data-timepicker="true" data-time-format='hh:ii aa' readonly />
</div>
</div>
<div class="form-group col-md-6">
<label>Fin:</label>
<div>
<input type="text" id="dpFin" name="dpFin" class="form-control datepicker-here" data-language='es' data-timepicker="true" data-time-format='hh:ii aa' readonly onblur="compararFechas()" />
</div>
</div>
You're using a 3rd party datepicker by the looks of it, so your blur event never gets triggered. There will likely be an event on your datepicker you can hook into if you check the documentation.
blur will trigger when you lose focus on the input. When using a datepicker you've already lost focus when the datepicker pops up - hence the old value.
blur event will trigger when you are no longer focused on that control, therefor if you want see the change immediately, you should use or oninput event instead. But as #Sean T mentioned, it must be an event in your 3rd party datepicker to trigger what you want.
I hope it helps :)
I have a div which show details like mobilenumber, name etc. like {{::mobilenumber}}, {{::name}}
In that div, there is a button that renders the same values in the new form
By using the button in the form, the user can change the values but in the div where I am showing details, values don't change after clicking on the button
<form ng-submit="form.$valid && saveDetails()">
<input type="text" class="form-control capitalize" placeholder="Full Name" name="fullname"ng-model="address.fullname" maxlength="50" ng-trim="true" autocomplete="off" required >
<span><!-- Mobile Number required --></span>
<input type="text" class="form-control capitalize" placeholder="Mobile Number" name="mobilenumber" id="mobilenumber" ng-model="address.mobilenumber" ng-minlength="10" maxlength="12" ng-trim="true" autocomplete="off" required>
<span><!-- Mobile Number required --></span>
<button ng-click="form.submitted=true><span>Update User Details</span</button>
</form>
Do I want to use one-way binding only?
I tried using $scope.$broadcast('$$rebind:refresh'); but still values don't change.
Any help or guidance would be very helpful for me.
If you really want to keep some sort of one-way-binding...
What you could do, is just use two way binding but with a dataset in between. It gives some overhead but it is a possible solution to your problem. In order to update the view, you just update the copied data. You can control when the data in the view is updated.
When you use interpolation {{mobilenumber}} in your html, angular creates a watcher that watches the property mobilenumber on a scope:
$scope.$watch('mobilenumber', function() {
// update DOM
});
Whenever the value changes, DOM is updated.
However, if you use one time binding {{:mobilenumber}}, as soon as your callback receives truthy value, angular removes the watcher:
var unwatch = $scope.$watch('mobilenumber', function() {
if (value) {
// update DOM
unwatch();
}
);
And since there is no more watcher for mobilenumber, whenever you update values on the scope inside your saveDetails() method, the callback is not triggered and DOM is not updated.
If you're planning on updating values constantly, you should not use one time binding. Use regular bindings:
<div>{{mobilenumber}}</div>
This is my first html textbox with javascript code
<div>
<input type="text" onchange="getTheValue(this)" id="12345" />
</div>
and this is my second html tag
<input type="hidden" id="12345_hiddenField" ng-model="hiddenField"/>
And on onchange event i am calling this javascript function
function getTheValue(data) {
document.getElementById("12345_hiddenField").value = data.value;
}
i want first textbox value to be assigned to second textbox ngmodel value with pure javascript no angualrjs methods in that, becoz that onchange function is written in seperate pure javascript file,is their anyway to do this?
I would do it like this.
document.getElementById("12345").addEventListener('change',function() {
document.getElementById("12345_hiddenField").value = document.getElementById("12345").value;
See fiddle https://jsfiddle.net/9fh8rxck/
<input type="text" ng-model="textboxValue" id="12345" />
and your hidden:
<input type="hidden" id="12345_hiddenField" value="{{textboxValue}}"/>
Your input text is bound to the $scope property textboxValue
Your hidden input uses that variable as value {{textboxValue}}, everything is 2-way data-bound.
I have textbox, am setting as required field on button click event using below code in my JQuery file
> document.getElementById("txtboxID").required = true;
> $scope.txtboxID = '';
> $scope.FormName.txtboxID.$setValidity("required", false);
Textbox HTML code
<div class="col-sm-8" ng-class="{ 'has-error' : FormName.#txtboxID.$invalid }">
<input type="text" id="txtboxID" name="txtboxID" class="form-control" ng-model="txtboxID" >
<p ng-show="FormName.txtboxID.$error.required" class="help-block col-xs-12 col-sm-reset inline">Text box is required</p>
</div>
After button Click event -> Textbox required validation working fine.
But after I typed something in textBox class name
'ng-invalid-required ng-invalid'
is not changing. Please refer the below snap.
As the documentation says, you need to use the ng-required directive for Angular to be able to properly work with the attribute. It will allow you to conditionally set a field's requirement based on a boolean $scope variable.
Example:
<input type="text" id="txtboxID" name="txtboxID" class="form-control" ng-model="txtboxID" ng-required="txtboxRequired">
txtboxRequired being a variable in your Angular controller's scope, toggled on and off at your discretion. I'd heavily suggest making sure the function that toggles this is a function in your $scope variable, and only call it with ng-click (or by something else in your controller).
In general, you shouldn't be trying to manipulate the DOM in an Angular app.
I have this field in one form:
<input type="text" name="promocode" id="promoCode" value="" style="width:24%" maxlength="5">
and this field in another form:
<input type="hidden" name="custom" class="promo" value="" />
How can I do, so whenever the value of #promoCode is changed, it will also change the value of .promo
Currenlty, I have this:
var promo = $("#promoCode").val();
$("#promoCode").change(function(){
$('.promo').val(promo);
});
But that doesn't work.
$(function(){
$("#promoCode").change(function(){
$('.promo').val(this.value);
});
});
Make sure the DOM is ready when you attach your callback to the change event
this inside callback is the element the event attached to.
If you cache #promoCode value outside the change callback it will be out of sync right after the first change! use this.value inside the callback just like I did.