使用ng-init进行选择的默认值

Question

I am trying to set the default value for select box, but I have hard time trying to do it, and I have no idea what is wrong. Here is my code

<select class="form-control" ng-init="newQuestion.positionOnSurvey=vm.questionsPositions[0]" ng-model="newQuestion.positionOnSurvey">
                                    <option ng-repeat="position in vm.questionsPositions track by $index" value="{{position}}">{{position}}</option>
</select>

vm.questionsPositions[0] = 5, so this is not a problem. I am not initializing newQuestion in my controller, but it should be not a case with ng-init ?

UPDATE:

Now I am initializing the field like this, but it is still not working.

vm.newQuestion = {};
vm.newQuestion.positionOnSurvey = vm.questionsPositions[0];

<select class="form-control" ng-model="vm.newQuestion.positionOnSurvey">
    <option ng-repeat="position in vm.questionsPositions track by $index" value="{{position}}">{{position}}</option>
</select>

Answer 1

You should use controller to initialize the value and better way to create drop-down list using ng-options

Like:

HTML:

<select class="form-control" ng-model="newQuestion.positionOnSurvey" ng-options="position for position in vm.questionsPositions"></select>

Controller:

        $scope.vm ={};
        $scope.newQuestion ={};
        $scope.vm.questionsPositions = [12,14];
        $scope.newQuestion.positionOnSurvey = $scope.vm.questionsPositions[0];

so initial value in select list is 12

Answer 2

您可以尝试使用默认值在控制器中初始化$newQuestion.positionOnSurvey ，因此视图中的选择器将具有初始值。

Answer 3

The only appropriate use of ngInit is for aliasing special properties of ngRepeat [...]. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

According to the ngInit API, I'd suggest setting the initial value of your selection on your controller.

see: controller guide

Answer 4

<select class="form-control" ng-init="vm.newQuestion.positionOnSurvey=vm.questionsPositions[0]" ng-model="newQuestion.positionOnSurvey">
                                    <option ng-repeat="position in vm.questionsPositions track by $index" value="{{position}}">{{position}}</option>
</select>

You are declaring "newQuestion" variable in vm object. So, you can access that variable in html as "vm.newQuestion"

Answer 5

You sure that ng-options is not working? This code should do the trick.

<select ng-model="vm.newQuestion.positionOnSurvey" ng-options="position for position in vm.questionsPositions"></select>