Angular ng-options remove empty option and select only first option
I am using AngularJS to dynamically populate the content of selected options from an array of objects in my controller. My objects have a property named userProfileName .
How can I remove the empty parameter I am getting at the top?
Also, I would like to select the first profile, Profile 1, by default . How can I do that?
My code snippet is here:
<select id="requestorSite"
ng-model="selectedUserProfile"
ng-options="userProfile.userProfileName for userProfile in userProfiles"
ng-selected=""
class="form-control displayInlineBlock width40per marginLeft15">
</select>
My controller has
$scope.userProfiles
Because the object array and each object have a userProfileName attribute .
Below is a screenshot:
I would like to remove the empty option at the top and also select Profile 1 by default .
Thanks, Ankit
+3
source to share
1 answer
Do it:)
In your controller:
function myCtrl ($scope) {
$scope.userProfiles = [
{id: 10, name: 'Carton'},
{id: 27, name: 'Bernard'},
{id: 39, name: 'Julie'},
];
$scope.selectedUserProfile= $scope.userProfiles[0]; // Set by default the value "carton"
};
On your page:
<select id="requestorSite" ng-model="selectedUserProfile" ng-options="userProfile as userProfile.name for userProfile in userProfiles">
</select>
CodePen: http://codepen.io/anon/pen/qdOGVB
+10
source to share