Set ng-init value of select-controller with Angular using disabled options

Question

I can't get this to work:

<div class="year-divider">
    <select style="width:70px;" class="form-control year-selector"
            id="{{'playerYearSelector'}}"
            name="playerCurrYear" data-ng-model="user.playerYears.value"
            data-ng-init="user.playerYears.value = user.playerYears.valueIdx[user.initYearIdx]">
        <option data-ng-repeat="v in user.playerYears.valueIdx"
                value="{{user.playerYears.valueIdx[v]}}"
                data-ng-disabled="user.playerYears.disabled[v]">
           {{user.playerYears.strValues[v]}}
        </option>
    </select>
</div>

And in the controller I have:

$scope.user = {};
$scope.user.initYearIdx = 3;
var disabled = [ false, false, false, false, false, false, false, false, false, false, true ];
var strValues = [ "-2", "-1", "0", "1", "2", "3", "4", "5", "6", "7", "8" ];
var valueIdx = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var values = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
$scope.user.playerYears = {
                                    "value": 3,
                                    "values": values,
                                    "valueIdx": valueIdx,
                                    "strValues": strValues,
                                    "disabled": disabled    };

From what I have read this is how it should be done, but the initiation does not work. Everything else works as i should, and I can see that the variable ($scope.user.playerYears.value) does change when I select values from the dropdown-menu. Also the variable has the initiated value of 3, but the controller shows the first element as selected (-2).

I have tried to call a function and set the initiated value there but no effect with that either.

Can someone please explain how I can fix this.

Answer 1

You can fix it. Please, see jsfiddle. This does not work for angular 1.2.

angular.module('ExampleApp', [])
  .controller('firstCtrl', function($scope, $filter) {
    $scope.user = {};
    var disabled = [false, false, false, false, false, false, false, false, false, false, true];
    var strValues = ["-2", "-1", "0", "1", "2", "3", "4", "5", "6", "7", "8"];
    var valueIdx = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
    var values = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    $scope.user.playerYears = {
      "value": "3",
      "values": values,
      "valueIdx": valueIdx,
      "strValues": strValues,
      "disabled": disabled
    };
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="firstCtrl">
    <div class="year-divider">
      <select style="width:70px;" class="form-control year-selector" id="{{'playerYearSelector'}}" name="playerCurrYear" data-ng-model="user.playerYears.value">
        <option data-ng-repeat="v in user.playerYears.valueIdx" value="{{user.playerYears.valueIdx[v]}}" data-ng-disabled="user.playerYears.disabled[v]">
          {{user.playerYears.strValues[v]}}
        </option>
      </select>
    </div>
  </div>
</div>

Answer 2

Its not possible to use init for disabled fields.Once it is disabled, only way to set value if from module/controller functions. But we can use ng-init on the parent div or in controller div. For Example

<div ng-controller="testController as user" ng-init="user.playerYears.value  = user.playerYears.valueIdx[user.initYearIdx]">
  <div class="year-divider">
<select style="width:70px;" class="form-control year-selector"
        id="{{'playerYearSelector'}}"
        name="playerCurrYear" data-ng-model="user.playerYears.value">
    <option data-ng-repeat="v in user.playerYears.valueIdx"
            value="{{user.playerYears.valueIdx[v]}}"
            data-ng-disabled="user.playerYears.disabled[v]">
       {{user.playerYears.strValues[v]}}
    </option>
</select>
</div>
</div>

Answer 3

You can achieve everything you want with ngOptions, as long as you are running AngularJs 1.4.0 or better.

In the view:

<div ng-app="myApp" 
     ng-controller="MainCtrl">
  <div class="year-divider">
  <!-- just to show the binding is working -->
  {{ val }}<br>
    <select style="width:70px;" 
            class="form-control year-selector" 
            id="{{'playerYearSelector'}}" 
            name="playerCurrYear"
            ng-options="val disable when user.playerYears.disabled[val] for val in user.playerYears['valueIdx']"
            ng-model="val">
   </select>
   <span>Two values are disabled</span>
 </div>
</div>

In the controller:

angular.module('myApp', [])
.controller('MainCtrl', function($scope) {

$scope.user = {};
var isDisabled = [ false, false, true, false, false, false, false, false, false, false, true ];
var strValues = [ "-2", "-1", "0", "1", "2", "3", "4", "5", "6", "7", "8" ];
var valueIdx = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var values = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
$scope.user.playerYears = {
                        "value": 3,
                        "values": values,
                        "valueIdx": valueIdx,
                        "strValues": strValues,
                        disabled: isDisabled   
                      };
$scope.val = valueIdx[0];
});

Because of ngModel's two way binding, you should set the value you want in the controller, and rarely use ngInit. Once the user make a choice, the variable will be reassigned. Here's the fiddle. The ngOptions directive can look overly complicated, but it is better suited for dropdown menus or anything within a select tag.

Answer 4

From what I have read this is how it should be done, and the initiation works.

<select ng-model="selected" ng-init="selected=3"
        ng-options="item.value as item.str
                    disable when item.disabled
                    for item in voirList">
</select>

JS

vm.voirList = [
    {str: "-2", value: 0, disabled: false},
    {str: "-1", value: 1, disabled: false},
    {str: "0", value: 2, disabled: false},
    {str: "1", value: 3, disabled: false},
    {str: "2", value: 4, disabled: false},
    {str: "3", value: 5, disabled: false},
    {str: "4", value: 6, disabled: false},
    {str: "5", value: 7, disabled: false},
    {str: "6", value: 8, disabled: false},
    {str: "7", value: 9, disabled: false},
    {str: "8", value: 10, disabled: true},
    ];

The DEMO on JSFiddle.

For more information on the ng-options directive, see AngularJS ng-options API Reference.