I have this array in my scope
$scope.containers = [{id: 1, title: "Icebox"}, {id: 2, title: "Summer"},
{id: 3, title: "Milestone"}];
Can I create something like this ng-options?
<option value="1">Icebox</option>
<option value="2">Summer</option>
<option value="3">Milestone</option>
You can use ng-options
<select ng-options="v.id as v.title for v in containers" ng-model="selectedId">
</select>
Yes, if you are interested to show title use this way:
<select>
<option
ng-repeat="v in containers"
value="{{v.id}}"
title="{{v.title}}"
ng-selected="adresses.indexOf(v) == 0">{{v.title}}
</option>
</select>
Demo Fiddle
But if you want only to show value ng-options will be enogh
I ran in to this same issue, where I was required to use ng-options, this was my solution...
HTML:
<select ng-options="item.Id as item.Name for item in vm.listOfItems">
<option disabled>Select a value</option>
</select>
Controller:
vm.$onInit = function () {
$timeout(function () {
$("option").each(function (index, element) {
var text = $(element).text();
$(element).attr("title", text);
});
});
}
See this directive for showing title on options with ng-options.
angular.module("showTitle")
.directive("showSelectTitle", ["$injector", showSelectTitle]);
function showSelectTitle($injector) {
var $timeout = $injector.get("$timeout");
return {
scope: {},
link: function (scope, element) {
$timeout(function () {
$(element).find("option").each(function (index, elem) {
elem = $(elem);
var text = elem.text();
var truncated = text.substring(0, 30) + "...";
elem.attr("title", text);
elem.text(truncated);
elem.attr("label", truncated);
});
});
}
};
}
Use it like this
<select show-select-title ng-model="yourModel.Value" ng-options="value as label for yourArrayOfObjects"></select>
Hope it helps