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"
Related
If I use readonly, it grey out the dropdown but I am still able to select values and when I click save I am able to see value got fetched in the controller. But if I use disabled, it grey out and select the correct value (so looks good on UI) but when I click save and check my controller, it doesnt fetch the value in controller. I need where user is not able to change anything but value should get fetched in controller.
<div>
<select name="dose" id="dose" class="form-control form-control-sm selective" th:field="*{dose}" th:disabled="disabled">
<option value="">Choose...</option>
<option th:each="dose: ${doses}"
th:selected="${doseSelected == dose}"
th:text="${dose}"
th:value="${dose}">
</option>
</select>
</div>
I am attempting to create a form with a select with a bunch of options that are pulled from a database, and also one option that will be a placeholder that will say something like "Choose a title".
The issue I am experiencing is that although the placeholder option is indeed selected and is disabled correctly, it does not display in the actual input list before anyone clicks on it as the selected option.
Required behavior:
Before a user has clicked on the dropdown at all, they should see a dropdown that has the grayed out text of a disabled item that says "Choose a title". When they click on the dropdown, they can then choose from the list of titles that are grabbed from the database.
Current incorrect behavior:
Before a user has clicked on the dropdown at all, they see an empty dropdown menu with nothing written or selected in it. Once they click on the dropdown, it shows that the disabled option is currently selected even though the text doesn't show in the input box (but does in the dropdown), and are able to select one of the non-disabled options that is pulled from the database.
What am I doing wrong here? I've found several things online that tell me to do it the way I have it right now. Here is my code:
<label for="TitleSelector">
What do you want to edit?
</label>
<select name="TitleSelector" id="TitleSelector" v-model="selectedTitle">
<option value="" disabled selected>Choose A Title</option>
<option
v-for="(title, index) in allTitles"
:value="title"
:key="index"
>
{{ title }}
</option>
</select>
I've got it, it works if I v-bind the value of the disabled option like so:
<option :value="null" selected disabled>Choose A Title</option>
I have this input field with select dropdown defined in handlebar file.
<select name="assigneeSelect" id="{{this.commonID}}" class="custom-select sources" key="{{this.id}}" placeholder="{{this.assignee}}">
<option value="5f572f2f68b4420488b585cb">Charlotte Miles</option>
<option value="5f4d494c6dba221200f2cc1e">Sulekha Yadav</option>
<option value="5f4d49636dba221200f2cc1f">Adele Armstrong</option>
</select>
<input class="form-control" class="deadline" type="text" value="{{this.deadline}}"/>
Here is the UI. Both are in one row in different <td>
First I fill the deadline input text with some data and then I change the select drop-down option. So now what I want is that onChange of select dropdown i want to fetch the respective row's input text and then I need to send it via AJAX call on nodejs server side which then update the deadline field in backend mongoDB which gets reflected back in deadline input field again when the page loads.
I am trying this code for fetching its value but isn't working.
var deadline = $(".deadline").text();
alert(deadline);
Here I am getting blank alert. Also I am fetching data with class attribute because there are similar many rows on same page.
use val() function like this
var deadline = $(".deadline").val();
alert(deadline);
I have created a dropdown in Angular and used change() event to capture the selected value.
Ex:the dropdown has Age,gender and Nationality. If I select Age,it will display some content and remove the Age option in the dropdown.
This part worked fine. Similarly I do the same for Gender too. Finally I have only Nationality.
I can't able to select the Nationality(last) field. Is there any other event for capturing this value?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<select class="form-control" name="seg_id" (change)="changeShape($event.target)">
<option disabled hidden [value]="selectUndefinedOptionValue">-- select --</option>
<option *ngFor="let seg of segment" [value]="seg">
{{seg}}
</option>
</select>
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();