I set the input value Array property sum and it shows value in input but when submitting form does not get Quantity property in Order object. If I change the value then I get Quantity property value. How can I get model value from ng-value?
<input ng-model="Order.Quantity" ng-value="subOrderList.sum('Quantity')" type="number">
To answer your question, "ng-value does not update Ng-model", it is by design. As mentioned in comments, ng-value and ng-model are not intended to by used in this way.
It isn't entirely clear what you are trying to achieve here, so here's a couple potential solutions:
If you are just looking to display a value then you don't need to use an input at all. Both of these will behave the same and update when needed:
<span>{{subOrderList.sum('Quantity')}}</span>
<span ng-bind="subOrderList.sum('Quantity')"></span>
If you actually need this value to be updated by user input then the HTML would look like this:
<input ng-model="Order.Quantity" type="number">
And then you will need to manually update that value in a controller or service when needed:
Order.Quantity = subOrderList.sum('Quantity');
From your comments it almost seems like you need an input that also changes dynamically and sporadically, but without a data example or more code I can't really see how that would work.
Related
I'm not new to HTML but I always get confused with input elements, below is some html:
<input id="firstTest" />
<input id="secondTest" value="Hello"/>
so for the firstTest input, I typed some text like "Hi",then do:
let firstInput = document.getElementById('firstTest');
console.log(firstInput.value) //produces "Hi"
but for the secondTest input, I did the same thing but the value is always "Hello" and I can't type anything into the input field.
So my questions are:
Q1-why for the firstInput, I didn't specify a value attribute but the value can change depending on what I typed?
Q2-when I type sth into the field, what actually happened? How browser display the thing I type?
does input object in DOM get its value property updated automatically then the browser displays the latest value on screen?
Q3-if input object in DOM get its value property updated automatically, why on the secondInput that has a value attribute couldn't get its value property updated automatically?
Q1-why for the firstInput, I didn't specify a value attribute but the value can change depending on what I typed?
The value HTML attribute serves only for the purpose of defining an initial value. input elements have a Javascript API, and in this, there is a value property (which you are using in your console.log). This value property constantly reflects whatever is in the input. If you want to know what is in the value attribute, there's two ways to find out:
el.getAttribute('value');
or, using the aforementioned API
el.defaultValue;
Q2-when I type sth into the field, what actually happened? How browser display the thing I type? does input object in DOM get its value property updated automatically then the browser displays the latest value on screen?
That's a matter of how the browser handles it internally. This is an implentation detail which is never relevant for the web developer. It is laid out in the specification for that element.
Q3-if input object in DOM get its value property updated automatically, why on the secondInput that has a value attribute couldn't get its value property updated automatically?
Given the code you show here, that cannot be the case. The only ways to disable typing in an input is if the input has a disabled or readonlyattribute, or if someone has added a keydown listener that calls event.preventDefault().
If this does not fully answer your question, please leave a comment stating what is remaining unclear or unanswered.
Good evening,
I am writing an application using AngularJS and I require for the application to send data with a POST request to the nodejs server.
My data is structured like as a json object and it has data binding thanks to the AngularJS framework.
As of now, a function is dynamically trying to create possible values that the user might like inside of some input tags. An example:
<button ng-click="generateFoodAndBeverages(row)>Generate</button>
<input type="text" ng-model="row.service.day.beverage" placeholder="beverage" />
<input type="text" ng-model="row.service.day.food" placeholder="food" />
The two input values can be set by the user by typing in the value they would like (e.g. "Cola", "Hamburger"), but above the input tags is a button that can generate the input values for the user.
The function that generates the values takes them from an array and then at the end of the function returns two possible values, one for beverages and one for food.
When it has the two returning values it changes the attribute value of both inputs, setting them to the two possibilities generated by the function:
jQuery("#input1").attr("value", generateFoodAndBeverages(row)[0]);
jQuery("#input2").attr("value", generateFoodAndBeverages(row)[1]);
This is not perfect nor elegant but it's working. The function populates and dynamically changes the value attribute of those two input elements each time the user requests for automatic generation of food and beverages so the values are actually set and do exist.
Even so, even if I see them on screen as text inside the input fields, my POST request does not recognize the fact that the ng-model actually changed. The only way the ng-model registers the changes to the value attribute of the input fields is if the user types something with his keyboard, manually changing the value attribute. Another example:
<input type="text" value="generateValue()" ng-model="row.service.info" />
The one up here does not change the ng-model value at all.
<input type="text" value="User Typed Value" ng-model="row.service.info" />
This other one instead does change the ng-model value and as it changes and exists, it is passed to the $scope that can later be sent as a POST request to the server.
Any ideas as to why the "automatically and dynamically generated" value of the input field does not get registered by the ng-model while the user typed value does?
Thanks in advance!
[EDIT]
Apparently the problem comes with the ng-model not changing. I tried to debug the problem by applying an ng-change in the input. If the change is done by javascript, it is not registered with the ng-model and the ng-change function does not fire because the ng-model was not changed even tho' I can clearly see the new value set by javascript for the input tag. If I change the value of the input tag by hand the ng-change is fired and the console logs the change.
I could apply the changes directly to the ng-model if it weren't so different for each row.
Having the ng-model like this:
<input ng-model="row.serviceInfo.DayObject[dayString].food" />
<input ng-model="row.serviceInfo.DayObject[dayString].beverage" />
How would I be able to apply the changes directly to the ng-model given how dynamic the model is. As an example, I could have 1000 rows, each with their own serviceInfo object. I don't know how I could change the model for each of those rows with the dynamically generated values.
[EDIT]
The problem was indeed with ng-model not changing. The solution consisted in applying the changes to the ng-model for each element inside the dynamically generated values function. Thanks everyone for the input. I'll leave this piece of code here if anyone ever comes across the same problem! Thanks again!
let foodEl = angular.element(the row element food input);
let beverageEl = angular.element(the row element beverage input);
$scope.displayedCollection[i].serviceInfo = {
"day" : {
"food" : generatedValuesFood(el, day),
"beverage" : generatedValuesBeverage(el, day)
}
};
foodEl.val($scope.displayedCollection[i].serviceInfo.day.food);
beverageEl.val($scope.displayedCollection[i].serviceInfo.day.beverage);
I think that your problem is quite simple. As #ssougnez said, don't mixed jquery with angularjs. Angularjs use data-binding concept, don't use jquery style to change the input value instead use the ng-model directive to bind data from the model to the view on HTML controls (input, select, textarea). In your generateFoodAndBeverages function just set the ng-model value according to which row for eg:
var generateFoodAndBeverages = function () {
$scope.row.service.day.beverage = array[0];
$scope.row.service.day.food = array[1];
};
I am wondering if there is a way to use JavaScript to check all form fields with a similar name for a specific value.
I have several hidden fields on my form with names like "associd1", "associd2" etc..
Is there a way to loop through all fields with a name like "associd" and check the value of those fields for a certain value?
Of course there is. Get them with document.querySelectorAll or jQuery and set their checked property. Give it a try and come back with your code if you have questions or problems.
I tried to update input element's value using .val() and it turned out that it doesn't affect the value="" attribute. After reading some topics here on stackoverflow, it turned out that these are not the same.
I started changing them both to be sure I do not do any mistake there:
$("#elementid").val(variableNumber).attr('value', variableNumber);
Now, lets say that I am sending the value of my input to validate it in php.
Which of these will be sent ff I make them different?
$("elementid").val(variable1);
$("elementid").attr('value', variable2);
Is there any rule on this? or any factor that makes one of these being sent as the actual "value" ?
Which of these will be sent ff I make them different?
The input's current value will be sent. The current value is reflected by the the value property. The value attribute represents the default value of the input, not its current value (and is reflected as the defaultValue property on the input). The default value is used to initialize the value when the input is created, and to reset it if you use the reset method of a form it's in.
Unless you want to change the default value, there's no need to set the value attribute, just the property. The property is what val changes, what changes when the user acts on the input, and what gets sent when the form is submitted.
When you are working with <input type='text'> I think you should use attr('value', variableNumber); instead of val(value).
val(value) is useful when working on a jQuery object containing elements like <input type="checkbox">, <input type="radio">, and <option>s inside of a <select>. More infomation here.
I am feeling really stupid and not sure if doing something really dumb what... so excuse me in advance.
I have the following HTML:
<input type="text" value="0" name="pcscubes" id="pcscubes">
I have the below jquery syntax:
var cubes=123.2;
$("#pcscubes1").val(cubes);
var test=$("#pcscubes1").val();
alert(test);
When the jquery executes, the input box will display 123.2 and the alert will be 123.2.
if you inspect the html object though, the value is still 0?
so the display of the input is different from what the real value is. so when I submit this form it posts 0 rather than 123.2
Now I have built a whole web app with this syntax and works perfectly. today it just stops working? I have restarted browser, checked old code that was working, logged off and on and still it does the same.
web app obviously has jquery loaded and jquery ui on this form.
using codeigniter?
any ideas as I am banging my head over something so stupid....
Out of interest I created the below fiddle and it is doing the same?
http://jsfiddle.net/49nqU/
why is the value 0 when it is showing 123.2?
Thanks as always,
This is a case of attributes vs. properties.
What you are seeing in the inspector is the value attribute, which does not update when you programmatically update a field's value property.
Pay no attention to what the DOM inspector says; it'll only show the value as it was when the page loaded (unless you explicitly change the field's value attribute rather than, as jQuery's val() does, its value property.)
Further reading: http://jquery-howto.blogspot.co.uk/2011/06/html-difference-between-attribute-and.html
Some attributes are closely tied to their property counterparts. That is to say, updating the property also updates the attribute. This is the case, for example, with the class attribute and its className property counterpart. value, however, is different; updating the property does not update the attribute (but, just to confuse things further, updating the attribute does update the property!)
val() is changing the value property, not attribute. The value attribute is initialized at the loading of the page. Once you change text field the value property and attribute have differnet values.
But you can use plain JS for changing the value attribute also.
Try:
var cubes=123.2;
document.getElementById('qty').setAttribute('value',cubes);
var test=$("#qty").val();
alert(test);
DEMO