I am using AngularJS and HTML. Is there a way to pre-select an option in an option tag if my options are being generated using an ng-repeat? See below code snippet for example:
HTML:
<select class="form-control" id="eventSelectMenu">
<option ng-repeat="option in allEventData">{{option.name}}</option>
</select>
I have tried solutions presented here and here, but none have been successful.
Thank you for any advice you can give!
You can try this syntax. Also, you need to use the ng-model that will five you the value you need to select:
<select class="form-control"
ng-model="yourmodel"
ng-options="option for option in allEventData">
</select>
you can set any item which should be pre-selected as value of select's ngModel
console.clear();
angular.module('so-answer', [])
.controller('ctrl', ['$scope',
function($scope) {
$scope.options = [1, 2, 3, 4, 5, 6];
$scope.selected = 3;
}
])<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="so-answer" ng-controller="ctrl">
<select ng-model="selected" ng-options="opt for opt in options"></select>
</div>
In addition to the answers already posted, I'll add this one. This one demonstrates how to use an array of objects for the select. In this case the events in allEventData are assumed to have a name and value property. Adjust to your case accordingly
angular.module("app", [])
.controller("controller", function($scope){
$scope.allEventData = [
{
value: 1,
name: "Event 1"
},
{
value: 2,
name: "Event 2"
},
{
value: 3,
name: "Event 3"
}
]
$scope.selectedEventValue = 3
})<!DOCTYPE html>
<html ng-app="app" ng-controller="controller">
<head>
<script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<select class="form-control" id="eventSelectMenu" ng-model="selectedEventValue" ng-options="item.value as item.name for item in allEventData">
</select>
<pre>Selected Value: {{selectedEventValue}}</pre>
</body>
</html>
You should be able to bind attribute directly like
<option ng-repeat="option in allEventData" selected={{option.selected}}>{{option.name}}</option>
I like this:
<select id="test"
name="test"
ng-model="vm.form.existing"
ng-options="item.value as item.title for item in vm.existingData">
</select>
