I am using AngularJS to populate my select options content dynamically from an array of objects in my controller. My objects has a property named userProfileName.
How would it be possible to remove the blank option that I am getting at the top?
Also, I would want to select the first profile Profile 1 by default. How can this be done?
My Snippet of code 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
As the array of object and each object has userProfileName attribute.
Below is the screen shot:
I would like to remove the blank option at the top and also have by default Profile 1 selected.
Thanks, Ankit
Do this :)
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"
};
In 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