AngularJS ng-repeat setting default select value

Question

$scope.activities =
    [
        { id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
        { id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
    ];

<select data-ng-model="engineer.currentActivity" data-ng-options="a.name for a in activities">                
</select>

Using the above I am able to create a select box with 3 values, a blank one and then dropdown menu and horizontal bar.

I would like to set Horizontal Bar as my default and cannot see how to do this.

Help would be great

BTW, if you are going to end up pulling activities from the server, and you need to hydrate the selected option, you want to look into track by expressions inside the ng-options expression. — Davin Tryon
– Davin Tryon, Commented Jan 25, 2014 at 15:19

Davin Tryon · Accepted Answer · 2014-01-25 14:59:40Z

4

In the controller, just add a line to setup the initial selection:

$scope.activities =
    [
        { id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
        { id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
    ];

$scope.engineer = {}; // if needed
$scope.engineer.currentActivity = $scope.activities[1];

answered Jan 25, 2014 at 14:59

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RaviH · Accepted Answer · 2014-01-25 15:31:26Z

3

In your angular controller:

$scope.activities = [
    { id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
    { id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
$scope.activity = $scope.activities[1]; //Bind 2nd activity to the model.

In the HTML:

<select ng-model="activity" 
    ng-options="activity as activity.name for activity in activities">
    <option value=""></option>
</select>

See the Fiddle

answered Jan 25, 2014 at 15:31

RaviH

3,5942 gold badges17 silver badges14 bronze badges

Comments

StarsSky · Accepted Answer · 2014-01-25 14:56:43Z

0

Use ng-init directive

ng-init="engineer.currentActivity = options[1]"

answered Jan 25, 2014 at 14:56

StarsSky

6,7016 gold badges40 silver badges63 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-repeat setting default select value

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related