Question

73

Angular ng-options remove blank option and select the first option only

rated 0 times [ 79] [ 6] / answers: 1 / hits: 19686 / 9 Years ago, thu, may 7, 2015, 12:00:00

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:
enter

I would like to remove the blank option at the top and also have by default Profile 1 selected.

Thanks,
Ankit

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

pierce

Add To Favorites

Follow

Total Points: 315

Total Questions: 103

Total Answers: 89

Location: Svalbard and Jan Mayen

Member since Mon, Jun 7, 2021

3 Years ago

answered 9 Years ago luna · Accepted Answer

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