Have problem with binding model to input and select in the same time. Input value changes when model selected from dropdown. But dropdown doesn't change if entered input value equal some of the values of list.
Example on Plunker
<select
ng-model="Choice.SelectedOption"
ng-options="choice.ID as choice.Name for choice in Choice.Options">
</select>
{{Choice.SelectedOption.ID}}
input model <input type="text" ng-model="Choice.SelectedOption">
input value {{ Choice.SelectedOption }}
Change model from dropdown, then try to change model from input to 1,2 or 3 (it's users ID's)
Changing <input type="text"> to <input type="number"> fixed it.
http://plnkr.co/edit/FQqVGZz51SCJunWPZwfd?p=preview
Related
I created an input that has a datalist with some options, like this:
<div>
<input id="fruitsInput" type="text" list="fruits" placeholder="choose a fruit" >
<datalist id="fruits">
<option value="banana">
<option value="apple">
<option value="pear">
<option value="strawberrie">
</datalist>
</div>
When the input has a value, for example "apple", and the user clicks on the input again I want to clear the value so the user can select another fruit. So I did this with vanilla Js
const input = document.getElementById("fruitsInput");
input.addEventListener('click', () => {
if(input.value) {
input.value = "";
}
});
It is working, but when I click on the input and it clears the value, the dropdown list with the options only shows the last value that the user selected. In that apple example, only apple will appear as a option when the user clicks again to clear the value.
Here's an live example on JSFiddle: https://jsfiddle.net/d8fas05u/14/
I want all the options to be shown again. Is there a way to do it?
You should click on button .
Because if you click on space area, maybe I think it display history of input value.
This means live code is correct.
I am having a form on a modal filled out, then creating a form on the same html page and filling the form with the information from the modal form.
All of the inputs fill fine, and on another page, the dropdown fills fine using just ng-model.
However, when this form shows up, the dropdown is on the selected value but it isnt able to be changed or clicked. Its just a static value. I want it to be able to be changed to the other values in the list. The dropdown has an arrow showings its a dropdown but when clicked it doesnt dropdown.
self.alert.measureType is bound with ng-model to a dropdown in the form on the modal that gets filled out.There is only 2 values in self.measurements, Meters and Kilometers.
Here is the dropdown
<select class="form-control" style="background-color: lightgoldenrodyellow; border-color: black;" ng-model="self.alert.measureType">
<option value="" style="color: #ccc !important" disabled> -Select- </option>
<option ng-repeat="type in self.measurements" value="{{type}}"> {{type}} </option>
</select>
Add your controller following this.
Assign the value your model in selected value
$scope.self.alert.measureType = "Meters"
I have a dropdownlist with a list of countries (all countries)
<select id="Country" onchange="country();">
<option id="3">Japan</option>
<option id="4">Canada</option>
<option id="5">France</option>
<option id="6">Peru</option>
</select>
I have the form in a modal that i want get country value from.
<input id="seachcountry" type="text" class="form-control" name="country">
I have written a JQuery line to get the value from the modal form to the page fields, everything works great but the country select fields are not changing the value.
$("#seachcountry").val($("#modalform").val()).trigger("change");
thank you for your suggestions!
This will work for you:
Just inject the value of the <input> to <select>.
I have created a snippet for you.
var Tval = $('#seachcountry').val();
$('#Country').val(Tval);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Country" onchange="country();">
<option id="3">Japan</option>
<option id="4">Canada</option>
<option id="5">France</option>
<option id="6">Peru</option>
</select>
<input id="seachcountry" type="text" class="form-control" name="country" value="France">
Try this.
function country() {
$("#seachcountry").val($(this).val());
}
For changing value in any select you just need send exist value from this select. In your select options have only ids, but not have value attribute. So if you add value equal to id to change value in the your form to "France" need run following:
$("#selectId").val(5)
Instead of 5 you can obtain value from any other field or else.
If you want set your value to input field when changed in select, you need attach listener that will do all work. It will looks like this:
$("#selectId").on("change", function(){
$("#inputFieldId").val($(this).find(":selected").text());
})
This will set displayed value to select, to set real value just write instead $(this).find(":selected").text() this $(this).val()
I am using select, in which I require selected value and dynamically created index (I don't want to set default to [0] index)
How it can be done.
<div class="input-label">
Select Mobile
</div>
<select ng-model="mobile" ng-options="mobile as mobile.value for mobile in editContactModalData.phoneNumbers"></select>
</label>
Above is select option and below is input box where the selected value is set
<label class="item item-input item-stacked-label" ng-show="mobile">
<input type="tel" maxlength="10" placeholder="mobile" ng-model="mobile.value">
</label>
this is one modal and I want to show these changes of selected mobile in another modal
the second modal consist
<span>{{contact.phoneNumbers[0].value}}</span>
so in this in the place of [0] index i want to put dynamically selected value.
#Nikhil: First thing ngOptions doesn't support $index like ng-repeat.
If you needed index of that value than you can try like this.
<select
ng-model="select"
ng-options="values.indexOf(selectedItem) as selectedItem for
selectedItem in values">
</select>
You can use ng-change and assign value to contact like
<select ng-change="setNumber(mobile)" ng-model="mobile" ng-options="mobile as mobile.value for mobile in editContactModalData.phoneNumbers"></select>
In controller just set value:
$scope.setNumber = function(num){
$scope.contact = num.value;
}
Then this will show in view
{{contact}}
I've been dealing with this problem for a long time. I currently have a function called "add ()" that allows me to add items to an array that feeds a dropdown and text fields. Every time I add a new item to the array, I add it empty:
$scope.aAnimals.push({"animal": ""})
This causes a problem with the dropdown, since the value of "animal" is equal to ""
<Option style="display: none" value=""> Select an animal </option>
Then the item is not added. Both "animal" and the dropdown value of the first option are empty strings. If you add a value for "animal", other than "" here it would work and would be added to the dropdown.
What I can do? I want the generated text fields to be empty, and the dropdown adds the item.
<select class="form-control" ng-model='obj.animal' id='animal' name='animal'
ng-options="opt as opt.animal for opt in aAnimals track by opt.animal">
<option style="display:none" value="">Select an animal</option>
</select>
<div ng-repeat='item in aAnimals'>
<input type='text' value={{item.animal}} class='animal' />
</div>
$scope.obj = {}
$scope.aAnimals=[{ "animal": "cat"},{ "animal": "dog"}]
$scope.add=function(){
$scope.aAnimals.push({ "animal": ""})
}
http://plnkr.co/edit/PRDp3a1bDJKtRmGR9GMY?p=preview
Let me verify what you need.
When the user click on the Add button, a new empty text box will be create in the page and a new empty option will be create in the drop down. When the user change the value in the text box, the drop down option will change.
In this case your need to modify the code like this.
<select class="form-control" ng-model='obj.animal' id='animal' name='animal'
ng-options="opt as opt.animal for opt in aAnimals">
<option style="display:none" value="">Select an animal</option>
</select>
<div ng-repeat='item in aAnimals'>
<input type='text' class='animal' ng-model='item.animal' />
</div>
I removed track by opt.animal like Pankas said, and added ng-model='item.animal', also don't need value={{item.animal}} since we use AngularJS 2-way binding.
Your code is working perfectly, just remove display none in option
<option value="">Select an animal</option>
I seen you are using jquery in Save functionality. We have jqlite in built in angular. Please check below code for save.
var length = $scope.aAnimals.length;
$scope.aAnimals[length-1].animal =
angular.element(document).find('.animal').eq(length-1).val();