Develop Reference

Angular 4 option selected by default in template

I want to have an option selected by default but it only works if I remove the NgModel directive from the select.
<select id="privileges" name="privileges" class="form-control" [(ngModel)]="value" required>
<option [selected]="(user | async).privileges == Administrador" value="Administrador">Administrador</option>
<option value="Empleado">Empleado</option>
</select>
If I remove the ngmodel directive if it works perfectly but obviously it's not what I need.

[selected]="..." doesn't work with ngModel.
To select a value, assign the value to your value field.
Angular will make the option the selected, where value="..." is equal to the value assigned to the value field used in [(ngModel)]="value".
If the used value is not a string, use [ngValue]="..." instead of [value]="..." or value="{{...}}".

HTML select using ng-options with multiple "default" options

I am currently trying to make a drop down menu that runs off of a model but also has two "default" options that are at the top. Currently I have the following:
<select class="category-selector" chosen
inherit-select-classes="true"
ng-if="auction.category_options.length > 1"
ng-model="auction.active_category"
ng-options="g.label group by g.main_category for g in auction.category_options"
ng-change="auction.active_category == null ? auction.clear_keyword_matching() : auction.refresh_matching_items()">
<option value="" selected>Active items ({{auction.category_counts['Active'].total}})</option>
<option value="all">All items ({{auction.category_counts['All'].total}})</option>
</select>
I am having trouble getting the "All items" option so show up in the dropdown. Is it not possible to declare two options and populate the rest using the ng-options / model?
Image of dropdown

Adding extra option tags only works if you set value="" for the additional options
<option value="" selected>...</option>
As soon as the value isn't empty, it will not show, as explain here. So you will probably need build this using ng-repeat.
In this answer, there is a solution using a directive, maybe that could work.

Select drop down options from array in AngularJS using same ng-model

I have a cross platform app developed using AngularJS, Monaca and OnsenUI.
One of my views is large form where the user can select a number of drop-down select values. For a large part of the form the options would be Yes/No drop-down select options.
I have created an array in my app.js to hold the Yes/No options to populate the drop-down select values as below.
$scope.OptionYesNo = [{
yesnooptiondesc: "No",
yesnooptionid: "0"
}, {
yesnooptiondesc: "Yes",
yesnooptionid: "1"
}];
Then to populate my drop-down select options I do the following in my view:
<ons-row>
<ons-col>
Option 1
<select id="" name="" ng-model="OptionYesNo.yesnooptionid" ng-options="yesNoOption.yesnooptionid as yesNoOption.yesnooptiondesc for yesNoOption in OptionYesNo" ng-change="changedValue(OptionYesNo.yesnooptionid, 'OptionOne')">
<option value="" label="-- Please Select --"></option>
</select>
</ons-col>
</ons-row>
Then in my app.js I handle the changes in the selected values options in my changedValue(...) function as below. I pass an identifier to the function as well as an indicator to which array to save the value to (omitted because not relevant)
$scope.changedValue = function (selectedValue, identifier) {
switch (identifier) {
case "OptionOne":
$scope.optionOneArray.push(selectedValue);
break;
case "OptionTwo":
$scope.optionTwoArray = selectedValue;
break;
}
}
The problem is when I try and add a second Yes/No option using the same method as above e.g.
<ons-row>
<ons-col>
Option 2
<select id="" name="" ng-model="OptionYesNo.yesnooptionid" ng-options="yesNoOption.yesnooptionid as yesNoOption.yesnooptiondesc for yesNoOption in OptionYesNo" ng-change="changedValue(OptionYesNo.yesnooptionid, 'OptionTwo')">
<option value="" label="-- Please Select --"></option>
</select>
</ons-col>
</ons-row>
Whenever I change one select value, the other one changes as well because they use the same ng-model. How do I manage this situation? I dont want (or think I have to) create a $scope.OptionOneYesNo = [{ ... }]; $scope.OptionTwoYesNo = [{ ... }]; for each select drop-down as there could potential be 20+ select drop-downs.

You need to create different ng-models in the view for your dropdowns. Don't use the same model on all the dropdowns. You can still iterate over the options from $scope.optionsyesno on each dropdown. This should do the trick.

Probably this can point you to the right direction. You can repeat over your option array. As in an example i used which is working well:
<select class="form-control" ng-model="user.gefunden" ng-required="true" ng-init="user.gefunden = gefunden[0]" ng-options="o as o for o in gefunden">
</select>
Gefunden is my array in the controller.

Angular select model not setting value

I have an array of strings, that are account numbers. When a record in a table is clicked i provide a modal to update the record and one of the fields is account number. This displays and some what correctly but seems to loss its two way binding with vm.accountNumber but also does show the value that the model is.
vm.accountNumber always has a value that is set when the table row is being clicked for editing. It just never makes it to the select despite the model. I suspect im losing the two way link and it is creating its own variable for the model.
<select class="ui search fluid selection dropdown" id="accountSearch" ng-model="vm.accountNumber">
<!--ng-options="account for account in vm.accounts.slice(1)">-->
<option ng-repeat="account in vm.accounts | limitTo: vm.accounts.length : 1" value="account" ng-selected="account == vm.accountNumber">{{account}}</option>
</select>
Here is a snippet of the accounts array.
0:"-"
1:"0001"
2:"0002"
3:"0003"
4:"0004"

I would say just use ng-options directive instead of ng-repeating option
<select class="ui search fluid selection dropdown"
id="accountSearch" ng-model="vm.accountNumber"
ng-options="account for account in vm.accounts">
</select>
Demo Plunkr
Though I'd like to point out your problem was with option value attribute,
you should change
value="account"
to
value="{{account}}"

How do I 'select' multiple values in a multiple select using angular.js

I have the following code:
<select ng-model="myData.states" multiple="multiple" ng-options="option.value as option.name for option in myStates">
</select>
I populate these options in a controller using ajax.
In some cases, I want to load the page with some options 'selected'. How do I achieve this if I have the state name? i.e. (CA, TX). I do not have the value since angular increments the value on its own.