CODEWITHSUNDEEP
htmlangularjs
GibboK
GibboK

Reputation: 73988

How to show up the first element for a select tag in angular?

I have the following markup in order to create a select menu.

My model, devices, contains 3 object (ex: pc1, pc2, pc3).

When select is rendered I can see the list (collapsed) which has an empty value. When expanding the list I see the an empty line as first object and after my 3 objects.

My question, how to display the first element by default?

    <select data-ng-model="devices"
                name="devices"
                data-ng-required="true"
                data-ng-options="device.name for device in devices"></select>

EDIT:

Html emitted by angular is

<option value="?" selected="selected"></option>
<option value="0">pc1</option>
<option value="1">pc2</option>
<option value="2">pc3</option>

Upvotes: 0

Views: 1131

Answers (1)

Raghavendra
Raghavendra

Reputation: 5387

You cannot put same name for devices array and same for ng-model. Suppose use other name for ng-model say selectedDevice

HTML:

<select 
    data-ng-model="selectedDevice"
    name="devices" 
    data-ng-required="true"
    data-ng-options="device.name for device in devices">
</select>

JS:

$scope.devices = [
    { name: "pc1" }, 
    { name: "pc2" },
    { name: "pc3" }
];

$scope.selectedDevice = $scope.devices[0];

DEMO: http://jsfiddle.net/GFF6P/

Upvotes: 1

Related Questions