How to populate value in a select dropdown as default using angular js

Question

 <select data-ng-model="userInf.role" class="span12" required>
    <option value="" selected="selected" disabled="disabled">Choose one</option>
    <option data-ng-repeat="role in roles" value="{{ role.text }}">{{ role.text }}</option>
</select>

angular

userService.getUser($scope.userInf,
        function( data ) // success
        {

        $scope.userInf = {
                username: data.userName,
                firstname: data.firstName,
                middlename: data.middleName,
                lastname: data.lastName,
                title: data.title,
                organization: data.organization,
                role: data.authorization.role,
                dateOfBirth:data.dateOfBirth,
                save: 'update'              
            };
        },

Other fileds are coming but select value is not coming

In inspect element i can see

<select data-ng-model="userInf.role" class="span12 ng-pristine ng-valid ng-valid-required" required="">
        <option value="? string:Analyst ?"></option>
        <option value="" selected="selected" disabled="disabled">Choose one</option>
        <!-- ngRepeat: role in roles --><option data-ng-repeat="role in roles" value="Analyst" class="ng-scope ng-binding">Analyst</option>
        <option data-ng-repeat="role in roles" value="Admin" class="ng-scope ng-binding">Admin</option>
        </select>

are you using IE9 browser?

Kushan
– Kushan

2013-07-02 10:23:50 +00:00
Commented Jul 2, 2013 at 10:23 — Kushan
– Kushan, Commented Jul 2, 2013 at 10:23

jcc · Accepted Answer · 2014-08-05 20:51:24Z

I know that Angular has the ng-init directive for this very purpose. Why don'y you try the ng-options directive? You can use the ng-init directive side by side with ng-options, and ng-options is a little more flexible than ng-repeat.

<select ng-model="userInf.role" ng-options="role for role in roles" ng-init="userInf.role = '' " class="span12 ng-pristine ng-valid ng-valid-required" required="">
    <option value="" disabled="disabled">Choose one</option>
</select>

The ng-init will set your ng-model, which is the value of the options defined below, to whatever you want, in this case, setting your ng-model to '' which is the value of your first option. The ng-options will populate the rest of your options for you with the values in your array. You might need some setup to display the correct names and values in your options. Look here https://docs.angularjs.org/api/ng/directive/select

reptilicus · Accepted Answer · 2014-08-05 21:01:51Z

1

Yeah, I would do it like this:


var app = angular.module('app', [])
app.controller('exampleCtrl', function ($scope) {
  $scope.options = ["a", "b", "c"]
  $scope.selected = $scope.options[1]

})

<select ng-options="o for o in options" ng-model="selected"></select>

Option "b" will be selected on load

answered Aug 5, 2014 at 21:01

reptilicus

10.4k6 gold badges59 silver badges80 bronze badges

Comments

Gopinath · Accepted Answer · 2016-03-30 03:19:18Z

0

<select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>

answered Mar 30, 2016 at 3:19

Gopinath

11 bronze badge

Collectives™ on Stack Overflow

How to populate value in a select dropdown as default using angular js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related