We Keep Coding

Angular ng-options returning index instead of object value

Below is my ng options
<select ng-init="vm.tutors = vm.tutors || 0" ng-model="vm.tutors" ng-options="tutors.fullname as tutor for (tutor, fullname) in vm.tutors" class="form-control"></select>
and below is my object
vm.tutors
[Object { fullname="NAME"}, Object { fullname="NAME2"}}]
What is the reason I keep getting the index instead of the actual value

The reason you are getting the index is because you have some syntax/concept issues.
Your code looks like it needs some love so here is a decent example of the proper way to do this:
Controller:
$scope.vm.tutors = [{fullname: "NAME"}, {fullname: "NAME2"}];
$scope.vm.selectedTutor = ""; // you can assign a value if you would like to have an option preselected.
HTML:
// in this example tutor.fullname is the Label and Value for the select option.
<select ng-model="vm.selectedTutor" ng-options="tutor.fullname for tutor in vm.tutors" ></select>
Now when you select an option the value will be assigned to $scope.vm.selectedTutor and it wont break your array.
Alternatively you can setup a key value pair relationship with your select options like so:
Controller:
$scope.vm.tutors = [{fullname: "NAME", id: "0"}, {fullname: "NAME2", id:"1"}];
HTML:
// in this example tutor.id is the Value and tutor.fullname is the Label for the select option
<select ng-model="vm.selectedTutor" ng-options="tutor.id as tutor.fullname for tutor in vm.tutors" ></select>
I hope this helps you understand what is going on here a little better, also HERE is a link to the AngularJS documentation.

Angularjs selectedOption not working

I have been trying to set the default selected option of the select box, don't know where I'm doing wrong.
here is my html
<span ng-controller="sizeController" style="width:137px; float:left; margin:15px 0 0 10px; ">
<label for="sizeSelect" style="float:left; color:orange">Size:</label>
<select name="sizeSelect" id="colorSelect" style="width:90px" ng-model="size" ng-change ="onSizeChange(size)">
<option ng-repeat="sizeoption in data.sizeOptions" value="{{sizeoption.id}}">{{sizeoption.name }}</option>
</select>
</span>
controller goes here
function sizeController($scope, $rootScope) {
$scope.data = {
sizeOptions: [
{id: 'Small', name: 'Small'},
{id: 'Medium', name: 'Medium'},
{id: 'Large', name: 'Large'},
{id: 'XLarge', name: 'XLarge'}
],
selectedOption: {id: 'Small', name: 'Small'}
};
$scope.onSizeChange = function(size){
$rootScope.size = size;
};
}
By default first value in the select box is always empty.
dont't know why.
thanks in advance

Please do yourself a favor by using ng-options instead of ng-repeating the options yourself.
<select name="sizeSelect"
id="colorSelect"
style="width:90px"
ng-model="size"
ng-change="onSizeChange(size)"
ng-options="sizeoption.id as sizeoption.name for sizeoption in data.sizeOptions">
</select>
Initialize by setting the model directly
$scope.size = "Small";

I make solution for you. Use ng-option for select in angular.
Solution
Here is more about ng-option:
ngOption

The first value in the select box is always empty because it is undefined. The select dropdown (ng-model="size") corresponds to size attribute of model, which is initially undefined. Initialize the size in the scope to one of the possible values like below, it will remove the undefined empty first option.
$scope.size = 'Medium';
But even if you initialize size to 2nd or 3rd option it will still select the first option, now you have to use ng-select to select the correct value ng-selected="size == sizeoption.id"
Complete solution here

AngularJS: ngRepeat for select on change ngOptions-list

I have an angularjs app, which has a select filled with options from an arry, using ngOptions. Every time the user clicks the button to add one, the ngRepeat directive generates a new select at the bottom.
I want to make sure that the user cannot select duplicate values.
So if my list contains 3 items: Item1, Item2 and Item3, and the user selects Item3 and then presses the button, the last generated select list should contain only items 'Item1' and 'Item2'.
If the user would then select 'Item1' and presses the button, the user should see the next select be generated with only the 'Item2' option.
So generally, in the case above, the generated HTML should be something like this:
<div data-ng-repeat="item in selectedOptions">
<select>
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
</select>
<select>
<option value="1">Item1</option>
<option value="2">Item2</option>
</select>
<select>
<option value="2">Item2</option>
</select>
</div>
Keep in mind: the user will keep seeing all THREE of the selects, once with every option available, once with just two options available, and once with just one option available.
I've been thinking of a lot of ways to make this work, but so far I haven't had any luck. Does anyone know of a pattern I can use in angular to achieve this behavior?
This is something that I've tried so far.
<div data-ng-repeat="function in item.Functions">
<select data-ng-model="function.Id" data-ng-options="j.Id as j.Name for j in getCorrectFunctions(functionsList)">
<option selected="selected" value="">---</option>
</select>
<a data-ng-click="addFunction()">
<i class="fa fa-plus fa-plus-lower"></i>
</a>
</div>
and in my directive code I have following function:
function getCorrectFunctions(functionList) {
var item = scope.item;
var list = functionList.slice();
//excluded for brevity: this was a loop which would remove every item that wasn't available anymore
return list;
}
I thought this would be executed once for every item in the list, but that does not seem to be case.
I don't think applying a filter would be any different, would it?

Here's one take on this. This does not have support for dynamically adding new functions, but however it does prevent user from selecting any given item twice.
See Plunker for working example and more details.
First the Angular setup part. Here I've defined a mock array of function objects ($scope.functions) and array for user made selections ($scope.selected)
var app = angular.module('app', []);
app.controller('SelectCtrl', function ($scope) {
$scope.functions = [
{id: 1, name: 'First'},
{id: 2, name: 'Second'},
{id: 3, name: 'Third'},
];
$scope.selected = [];
$scope.selectedFilter = function (selectNumber) {
// snipped for now
};
});
In html, showing only one select, but similar approach used for all 3 selects: set the selected value to the selected array in given index (0 for the case shown below), and use selectedFilter to filter functions with same index value.
<select ng-options="j.id as j.name for j in functions | filter:selectedFilter(0)" ng-model="selected[0]">
<option value="" selected="selected">---</option>
</select>
Then finally the filtering function. It returns true for all unselected functions and for the selected function of the given select.
$scope.selectedFilter = function (selectNumber) {
return function (func) {
if ($scope.selected.length === 0) {
return true;
} else {
var unselectedFunctions = _.filter($scope.functions, function (fn) {
return _.findIndex($scope.selected, function (sel) {
return fn.id === sel;
}) === -1;
});
var selectedForCurrentId = $scope.selected[selectNumber];
var selectedForCurrent = _.find($scope.functions, {id: selectedForCurrentId});
return func === selectedForCurrent || _.findIndex(unselectedFunctions, {id: func.id}) > -1;
}
};
};
Here I've used Lodash for some nice helper functions. Not affiliated with Lodash in any way, but I really suggest you to take a look at it, or any other similar library.
Hopefully this helps you to get things moving on!

Working with select using AngularJS's ng-options

I have read about it in other posts, but I couldn't figure it out.
I have an array,
$scope.items = [
{ID: '000001', Title: 'Chicago'},
{ID: '000002', Title: 'New York'},
{ID: '000003', Title: 'Washington'},
];
I want to render it as:
<select>
<option value="000001">Chicago</option>
<option value="000002">New York</option>
<option value="000003">Washington</option>
</select>
And also I want to select the option with ID=000002.
I have read select and tried, but I can't figure it out.

One thing to note is that ngModel is required for ngOptions to work... note the ng-model="blah" which is saying "set $scope.blah to the selected value".
Try this:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Here's more from AngularJS's documentation (if you haven't seen it):
for array data sources:
label for value in array
select as label for value in array
label group by group for value in array
= select as label group by group for value in array
for object data sources:
label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in object
For some clarification on option tag values in AngularJS:
When you use ng-options, the values of option tags written out by ng-options will always be the index of the array item the option tag relates to. This is because AngularJS actually allows you to select entire objects with select controls, and not just primitive types. For example:
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }
];
});
<div ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<pre>{{selectedItem | json}}</pre>
</div>
The above will allow you to select an entire object into $scope.selectedItem directly. The point is, with AngularJS, you don't need to worry about what's in your option tag. Let AngularJS handle that; you should only care about what's in your model in your scope.
Here is a plunker demonstrating the behavior above, and showing the HTML written out
Dealing with the default option:
There are a few things I've failed to mention above relating to the default option.
Selecting the first option and removing the empty option:
You can do this by adding a simple ng-init that sets the model (from ng-model) to the first element in the items your repeating in ng-options:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Note: This could get a little crazy if foo happens to be initialized properly to something "falsy". In that case, you'll want to handle the initialization of foo in your controller, most likely.
Customizing the default option:
This is a little different; here all you need to do is add an option tag as a child of your select, with an empty value attribute, then customize its inner text:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Note: In this case the "empty" option will stay there even after you select a different option. This isn't the case for the default behavior of selects under AngularJS.
A customized default option that hides after a selection is made:
If you wanted your customized default option to go away after you select a value, you can add an ng-hide attribute to your default option:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="" ng-if="foo">Select something to remove me.</option>
</select>

I'm learning AngularJS and was struggling with selection as well. I know this question is already answered, but I wanted to share some more code nevertheless.
In my test I have two listboxes: car makes and car models. The models list is disabled until some make is selected. If selection in makes listbox is later reset (set to 'Select Make') then the models listbox becomes disabled again AND its selection is reset as well (to 'Select Model'). Makes are retrieved as a resource while models are just hard-coded.
Makes JSON:
[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]
services.js:
angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
return $resource('makes.json', {}, {
query: {method:'GET', isArray:true}
});
});
HTML file:
<div ng:controller="MakeModelCtrl">
<div>Make</div>
<select id="makeListBox"
ng-model="make.selected"
ng-options="make.code as make.name for make in makes"
ng-change="makeChanged(make.selected)">
</select>
<div>Model</div>
<select id="modelListBox"
ng-disabled="makeNotSelected"
ng-model="model.selected"
ng-options="model.code as model.name for model in models">
</select>
</div>
controllers.js:
function MakeModelCtrl($scope)
{
$scope.makeNotSelected = true;
$scope.make = {selected: "0"};
$scope.makes = Make.query({}, function (makes) {
$scope.make = {selected: makes[0].code};
});
$scope.makeChanged = function(selectedMakeCode) {
$scope.makeNotSelected = !selectedMakeCode;
if ($scope.makeNotSelected)
{
$scope.model = {selected: "0"};
}
};
$scope.models = [
{code:"0", name:"Select Model"},
{code:"1", name:"Model1"},
{code:"2", name:"Model2"}
];
$scope.model = {selected: "0"};
}

For some reason AngularJS allows to get me confused. Their documentation is pretty horrible on this. More good examples of variations would be welcome.
Anyway, I have a slight variation on Ben Lesh's answer.
My data collections looks like this:
items =
[
{ key:"AD",value:"Andorra" }
, { key:"AI",value:"Anguilla" }
, { key:"AO",value:"Angola" }
...etc..
]
Now
<select ng-model="countries" ng-options="item.key as item.value for item in items"></select>
still resulted in the options value to be the index (0, 1, 2, etc.).
Adding Track By fixed it for me:
<select ng-model="blah" ng-options="item.value for item in items track by item.key"></select>
I reckon it happens more often that you want to add an array of objects into an select list, so I am going to remember this one!
Be aware that from AngularJS 1.4 you can't use ng-options any more, but you need to use ng-repeat on your option tag:
<select name="test">
<option ng-repeat="item in items" value="{{item.key}}">{{item.value}}</option>
</select>

The question is already answered (BTW, really good and comprehensive answer provided by Ben), but I would like to add another element for completeness, which may be also very handy.
In the example suggested by Ben:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
the following ngOptions form has been used: select as label for value in array.
Label is an expression, which result will be the label for <option> element. In that case you can perform certain string concatenations, in order to have more complex option labels.
Examples:
ng-options="item.ID as item.Title + ' - ' + item.ID for item in items" gives you labels like Title - ID
ng-options="item.ID as item.Title + ' (' + item.Title.length + ')' for item in items" gives you labels like Title (X), where X is length of Title string.
You can also use filters, for example,
ng-options="item.ID as item.Title + ' (' + (item.Title | uppercase) + ')' for item in items" gives you labels like Title (TITLE), where Title value of Title property and TITLE is the same value but converted to uppercase characters.
ng-options="item.ID as item.Title + ' (' + (item.SomeDate | date) + ')' for item in items" gives you labels like Title (27 Sep 2015), if your model has a property SomeDate

In CoffeeScript:
#directive
app.directive('select2', ->
templateUrl: 'partials/select.html'
restrict: 'E'
transclude: 1
replace: 1
scope:
options: '='
model: '='
link: (scope, el, atr)->
el.bind 'change', ->
console.log this.value
scope.model = parseInt(this.value)
console.log scope
scope.$apply()
)
<!-- HTML partial -->
<select>
<option ng-repeat='o in options'
value='{{$index}}' ng-bind='o'></option>
</select>
<!-- HTML usage -->
<select2 options='mnuOffline' model='offlinePage.toggle' ></select2>
<!-- Conclusion -->
<p>Sometimes it's much easier to create your own directive...</p>

If you need a custom title for each option, ng-options is not applicable. Instead use ng-repeat with options:
<select ng-model="myVariable">
<option ng-repeat="item in items"
value="{{item.ID}}"
title="Custom title: {{item.Title}} [{{item.ID}}]">
{{item.Title}}
</option>
</select>

It can be useful. Bindings do not always work.
<select id="product" class="form-control" name="product" required
ng-model="issue.productId"
ng-change="getProductVersions()"
ng-options="p.id as p.shortName for p in products"></select>
For example, you fill the options list source model from a REST service. A selected value was known before filling the list, and it was set. After executing the REST request with $http, the list option is done.
But the selected option is not set. For unknown reasons AngularJS in shadow $digest executing does not bind selected as it should be. I have got to use jQuery to set the selected. It`s important! AngularJS, in shadow, adds the prefix to the value of the attr "value" for generated by ng-repeat options. For int it is "number:".
$scope.issue.productId = productId;
function activate() {
$http.get('/product/list')
.then(function (response) {
$scope.products = response.data;
if (productId) {
console.log("" + $("#product option").length);//for clarity
$timeout(function () {
console.log("" + $("#product option").length);//for clarity
$('#product').val('number:'+productId);
}, 200);
}
});
}

Binding initial/default value of dropdown (select) list

I'm having a small issue with setting the initial value of a dropdown. The code below is the view model definition and the initialization in $(document).ready. I have an array called sourceMaterialTypes and a selectedSourceMaterialType representing the selected value of that array. I am initializing the view model with values from the (ASP.Net MVC) Model and ViewBag.
var viewModel = {
sourceMaterialTypes :
ko.observableArray(#Html.Raw(Json.Encode(ViewBag.SourceMaterialTypes))),
selectedSourceMaterialType :
ko.observable(#Html.Raw(Json.Encode(Model.SourceMaterialType))),
ingredientTypes :
ko.observableArray(#Html.Raw(Json.Encode(ViewBag.IngredientTypes))),
selectedIngredientType : ko.observable()
};
$(document).ready(function () {
ko.applyBindings(viewModel);
viewModel.selectedSourceMaterialType.subscribe(function(newSourceMaterialType) {
$.getJSON("/IngredientType/FindByMaterialType",
{ "id": newSourceMaterialType })
.success(function (data) {
viewModel.ingredientTypes($.parseJSON(data));
})
.error(function () { alert("error"); });
});
});
The following is the definition of my dropdown (select) list with the Knockout binding definition.
<select id="SourceMaterialTypeId"
name="SourceMaterialTypeId"
data-bind="options: sourceMaterialTypes,
optionsText: 'Name',
optionsValue : 'Id',
value: selectedSourceMaterialType"></select>
This all works fine except for the initially selected value in the source materials dropdown (selectedSourceMaterialType is bound correctly so when the dropdown selection changes its value is correctly updated, it is only the initial selection I am having a problem with), which is always the first item in the sourceMaterialTypes array on my view model.
I would like the initially selected value to be that which is initialized from the (server-side) model as the value of selectedSourceMaterialType view model property.

I guess you need to pass the Id only and not the whole object in the selectedSourceMaterialType observable function ->
selectedSourceMaterialType: ko.observable(#Model.SourceMaterialType.Id)

The API has the solution for you, you'll just need to add optionsCaption to your select.
<select id="SourceMaterialTypeId"
name="SourceMaterialTypeId"
data-bind="options: sourceMaterialTypes,
optionsText: 'Name',
optionsValue : 'Id',
value: selectedSourceMaterialType,
optionsCaption: 'Please select...'"></select>

As #nEEBz suggested, selectedSourceMaterialType is initialized improperly. In the learn.knockoutjs.com "Lists and Collections" tutorial, they initialize their viewmodel's selected-item property by passing the value of a specific index of the observable array. For example, do this:
selectedSourceMaterialType: ko.observable(sourceMaterialTypes[2])
...instead of this:
selectedSourceMaterialType: ko.observable({"Id":1,"Name":"Coffee Bean" /* ... */});
That way, the value of the selected item is a reference to the item in the same observable array that the dropdownlist items come from.