Установите значение ng-init для select-controller с Angular, используя отключенные опции

Question

Я не могу заставить это работать:

<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>

И в контроллере у меня есть:

$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    };

Из того, что я прочитал, это то, как это должно быть сделано, но инициация не работает. Все остальное работает так, как я должен, и я вижу, что переменная ($scope.user.playerYears.value) изменяется, когда я выбираю значения из выпадающего меню. Также переменная имеет начальное значение 3, но контроллер показывает первый выбранный элемент (-2).

Я попытался вызвать функцию и установить инициализированное значение, но с этим тоже ничего не произошло.

Может кто-нибудь объяснить, пожалуйста, как я могу это исправить.

Answer 1

Невозможно использовать init для отключенных полей. Как только он отключен, единственный способ установить значение, если из функций модуля / контроллера. Но мы можем использовать ng-init в родительском div или в контроллере div. Например

<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 2

С помощью ngOptions вы можете достичь всего, чего пожелаете, если вы используете AngularJs 1.4.0 или выше.

По мнению:

<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>

В контроллере:

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];
});

Из-за двусторонней привязки ngModel вы должны установить желаемое значение в контроллере и редко использовать ngInit. Как только пользователь сделает выбор, переменная будет переназначена. Вот скрипка Директива ngOptions может выглядеть слишком сложной, но она лучше подходит для выпадающих меню или чего-либо в теге select.

Answer 3

Из того, что я прочитал, это то, как это должно быть сделано, и инициация работает.

<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},
    ];

ДЕМО на JSFiddle.

Для получения дополнительной информации о ng-options Директива, см. Справочник по AngularJS ng-options API.

Answer 4

Вы можете это исправить. Пожалуйста, смотрите jsfiddle. Это не работает для agnular 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>