CODEWITHSUNDEEP
javascripthtmlcssangularjsangularjs-directive
user1189352
user1189352

Reputation: 3885

Cannot seem to set default option for Select Option; using Angular

I did some research but I just don't understand what's happening. When the page loads.. it has a blank <option> selected as default.

When I initially click the dropdownbox and the menu pops down.. I get the options:

  1. BLANK
  2. User
  3. Moderator
  4. Admin

then when i select something.. only

  1. User
  2. Moderator

  3. Admin are available for choosing

    User Moderator Admin

JS

$scope.formData = {
    role: 'Select Role...',
    userName: '',
    password: '',
    confirmPassword: '',
    clientId: '',
    clientName: 'Select Client...',
    clientShowId: '',
    clientShowName: 'Select Show...'
};

//Role DropDown Click
$scope.roleSelect = function (role) {
    $scope.formData.role = '--- Select Role---'
    $scope.formData.role = role;

    //reset other dropdowns
    $scope.formData.clientName = '---Select Client...';
    $scope.formData.clientShowName = 'Select Show...';
};

VIEW

<select class="form-control" ng-model="formData.role" ng-change="roleSelect(formData.role)" ng-init="formData.role = '--- Please Select---'">                     
    <option value="User">User</option>
    <option value="Moderator">Moderator</option>
    <option value="Admin">Admin</option>
</select>

Upvotes: 1

Views: 65

Answers (4)

scniro
scniro

Reputation: 16989

As an alternative to the above answers, if you're interested in using ngOptions, here is a simplified way to do so with a initial <option> element...

.controller('ctrl', function($scope) {
    $scope.options = ['User', 'Moderator', 'Admin'];
});

<select ng-model="selected" ng-options="o as o for o in options"> 
    <option value="">--- Please Select---</option>
</select>

JSFiddle Link - working demo

Upvotes: 1

itamar
itamar

Reputation: 3967

You need to put this in your view between the tags: Try setting your role as 'defaultVal' and then putting that in the

<option value="'defaultVal'">--- Please Select---</option>

Basically - you need to match the initial role setting to the value attribute in the Option tag.

Upvotes: 1

Fracedo
Fracedo

Reputation: 626

ng-model with select shows the default option only when the value in ng-model matches with the one of the elements in the options.

so you need to use it like this,

<select class="form-control" ng-model="formData.role" ng-init="formData.role = '--- Please Select---'" ng-change="roleSelect(formData.role)">                     
    <option>--- Please Select---</option>
    <option value="User">User</option>
    <option value="Moderator">Moderator</option>
    <option value="Admin">Admin</option>
  </select>

plunker link for the same.

Upvotes: 1

Michel
Michel

Reputation: 28359

The way you add the default option: ng-init="formData.role = '--- Please Select---'" is not the way to do.

It should be an option with an empty value.

You get an empty value when the list is loaded because in the model, $scope.formData.role is equal to 'Select Role...' and this value does not match any value from the list.

With:

$scope.formData = {
    role: '',
    // ...
}

and:

<select class="form-control" ng-model="formData.role">
    <option value="">--- Please Select---</option>
    <option value="User">User</option>
    <option value="Moderator">Moderator</option>
    <option value="Admin">Admin</option>
</select>

The initial value of formData.role will then match with the value of '--- Please Select---'

See fiddle

Upvotes: 1

Related Questions