Develop Reference

JavaScript array to Django form input dropdown list

<script>
let myArr = ["ProductA","ProductB","ProductC"];
</script>
I want to make a Django input dropdown using this javascript array.
<input type="text" name="product1" value="0" maxlength="500" class="textinput textInput form-control" id="id_product1">
When user will click on this Django form input, I want a drop-down list to appear, from which users can select an option.

AngularJS - call function after text field completion

I have a text field as
<input type="text" class="form-control" id="inputID" name="inputName" ng-model="inputUserName" ng-required="true" autofocus="true"/>
Once I input the text value and say, press Tab, or move on to the next field, I want to call a function which basically takes the input value and sends it to my server API to perform a validity check. How can I achieve this?

use the ng-blur:
<input type="text" ng-blur="method()">
https://docs.angularjs.org/api/ng/directive/ngBlur

AngularJS: Populate a text box with the ID from a dropdownlist

In the following code, the repeated input textbox CountryID is affected selection of the Country text box. When the page is inspected after a selection, the only visible text box has the value with the correct value, but this value is not displayed on the page. When the submit button is pressed, the Item.CountryID is blank. But if the one visible text box is populated manually, Item.CountryID becomes populated. How do I get the required value into the visible text box which already seems to have its value set?
<tr><td>Country:</td><td>
<select name="country" class="select" id="country" ng-model="Category.Country" >
<option ng-repeat="Item in SPCountryListItems | orderBy:'Country'" id="{{Category.CountryID}}">{{Item.Country}}</option>
</select>
</td></tr>
<tr><td>County ID</td>
<td>
<span ng-repeat="Item in SPCountryListItems | filter:Category.Country">
<input type="text" ng-model="Category.CountryID" value="{{Item.CountryID}}" id="CountryID" />
</span>
From the Inspect window (the value is not visible on the page):
<input type="text" ng-model="Category.CountryID" value="10" id="CountryID" class="ng-valid ng-touched ng-dirty ng-valid-parse">

Does a ng-model work on ng-repeated fields?

I am using ng-repeat and I am various levels in such as:
`ul in output.content.innercontent` or `li in ul.content.innercontent`
my input looks like this:
<input id="{{input.key}}" name="{{input.label}}" type="text"
value="{{input.value}}" placeholder="{{input.defaultValue}}"
value="{{input.label}}"
class="form-control input-md" uib-tooltip="{{input.tooltip}}"
ng-if="input.type == 'input'">
On any one of those whenever a change happens and then an onBlur I want to make a call. Is this possible with ng-model & ng-model-options="{updateOn:'blur'}" with all these fields? The bind behavior I see online are mostly of an input to read-only field somewhere. Should I use ng-blur followed with a on("change") type of behavior?

try with
<input id="{{input.key}}" name="{{input.label}}" type="text"
ng-model="{{input.value}}" <!-- this -->
placeholder="{{input.defaultValue}}"
class="form-control input-md" uib-tooltip="{{input.tooltip}}"
ng-if="input.type == 'input'">
ng-model should do it
<input ng-model-options"{updateOn: 'blur'}"/>
==> This update the model only when user get outside the input
To call a function on-blur :
<input ng-blur="callThisFn()"/>

AngularJS dynamic form value not picked up by angular on submit

I have a few form inputs on a page with angular model(s) attached but one of their values is set dynamically via a jquery call after some image upload has been performed.
<input class="form-control ng-dirty ng-valid ng-valid-required" id="name" ng-model="item.name" required="required" name="name" type="text" value="">
<input class="form-control ng-dirty ng-valid ng-valid-required" id="url" ng-model="item.url" required="required" name="url" type="text" value="">
<input class="form-control" id="imgname" ng-model="item.imgname" required="required" name="imgname" type="text" value="">
The later input field is added via jquery.
<input class="form-control" id="imgname" ng-model="item.imgname" required="required" name="imgname" type="text" value="">
The issue is then when i submit the form only the item.name and item.url are sent through and not the item.imgname.
my submit code:
$scope.submitForm = function(store){
....
$log.debug(store);
};
I am adding the code to the form via:
...
complete : function(imgname){
JQ('#imgname').val(imgname);
},...
How can i add the data and have the form pick it up on submit?

You can't set ng-model value via Jquery. Rather, you have to fill that scope named "item.imgname" somewhere in your controller like $scope.item.imgname="Hello"
and on Submit button you can get this whole model(item)... you'll have that value in item.imgname model for sure.

Well in fact after a few more goes at it and just checking my code, I first had to correct the input type as i was setting it to a URL not a text type thus it was always causing issues etc.
Anyway once that was sorted i then placed
$scope.item = {};
Within my controller.
Then replaced the
JQ('#imgname').val(imgname);
for the $scope value
complete : function(imgname){
$scope.item.img = imgname;
}....
Then once the image was uploaded and then the form field populated as above inc. the other form details it the img field was submitted with the form.