We Keep Coding

Display a default disabled, selected option as a placeholder in a vue select input

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>

How i can show a select list only after another select (parent) has been selected

Like i said in the title i want to keep a list hidden until another another list above has been selected, for example show student list after a class had been selected (so only student who belong to the selected class are shown)
<select name="class">
<option value="">class1</option>
<option value="">class2</option>
</select>
<select name="student">
<option value="">student1</option>
<option value="">student2</option>
</select>

Initially apply a hidden class (with display: none styling) to the second select list and then on the change of value (indicating a choice has been made) in the first select - remove the hidden class.
EDIT - as as suggested by #HerrSerker - the event listener is now in the JS as opposed to inline in the HTML.
Note that each select list has a selected disabled option - to allow for a blank option rather than the first option selected by default.
// add event listener for change of class select list
document.querySelector('select[name="class"]')
.addEventListener('change', updateStudent)
//function to remove the hidden class and styling of the second select list
function updateStudent() {
var el = document.querySelector('select[name="student"].hidden');
el.classList.remove('hidden')
}
select[name="student"].hidden {
display:none
}
<select name="class">
<option disabled selected></option>
<option value="">class1</option>
<option value="">class2</option>
</select>
<select name="student" class="hidden">
<option disabled selected></option>
<option value="">student1</option>
<option value="">student2</option>
</select>

Add item to a dropdown and a text field in angular.js

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();

AngularJS ng-show expression doesnt work on load

I have Select tag with 2 options and 1 default just saying "Select year". So I want a the div right after the Select to be hidden on load when the option is still on "Select year". The problem is it only hides the div only when I select one of the options then I choose again "Select year".
This is my code:
When do you want to study?
<select name="ddlYear" ng-model="data.calendar_year">
<option value="">-- Select Year --</option>
<option value"2015" >2015</option>
<option value="2016">2016</option>
</select>
<br/>
<div ng-show="data.calendar_year != 0">
<h3>Qualification type:</h3>
</div>
So basically on load I need the div containing the tag to be hidden but I dont know how.
Thank you

what is the default value for data.calendar_year?
Maybe it equals null or '' so it does !=0.
(if you don't define it before, thats how it is).

Angular ng-select do not start with last selected

Hu,
another question to angular.
I have an array:
items = [
{"id":1,"name":"AAA"},
{"id":2,"name":"BBB"},
{"id":3,"name":"CCC"},
{"id":4,"name":"DDD"}
]
and my ng-select that is combined with a label by
`{{ itemid }}
<select type="text" class="form-control form-control-small"
ng-model="itemId" ng-options="item.id as item.name for item in items">
</select>
Now, when I select by the first time the first option is an "empty space" that I can not choose. But choosing an option makes the drop down closes. And when I click on my select again the last selected option is hightlighted.And I'd like to have the "empty space" as first option again.
Is it possible?

Ye that's possible by resetting your itemId with a combination of ng-click and ng-change e.g.:
<select type="text" class="form-control form-control-small"
ng-model="itemId" ng-options="item.id as item.name for item in items"
ng-click="reset()" ng-change="update()">
</select>
Use one to track when a change is made and only if a change is made and the element is clicked again reset itemId to 0
See this plnkr for an example: http://embed.plnkr.co/i0J0lCZwgnQ9YRoeKoHS/

You can specify a blank option in your HTML as an 'option' element nested within the select (from angular docs):
<select ng-model="myColor" ng-options="color.name for color in colors">
<option value="">-- choose color --</option>
</select>