如何使用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>

Answer 1

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

Answer 2

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

Answer 3

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