使用禁用选项使用 Angular 设置选择控制器的 ng-init 值

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

你可以修复它。请参阅jsfiddle。这不适用于 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

无法将 init 用于禁用字段。一旦禁用，只有从模块/控制器功能设置值的方法。但是我们可以在父 div 或控制器 div 中使用 ng-init。例如

<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

只要您运行 AngularJs 1.4.0 或更高版本，您就可以使用 ngOptions 实现您想要的一切。

在视图中：

<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。一旦用户做出选择，变量将被重新分配。这是the fiddle。 ngOptions 指令可能看起来过于复杂，但它更适合下拉菜单或选择标记内的任何内容。

Answer 4

根据我的阅读，这是应该如何完成的，并且启动工作。

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

DEMO on JSFiddle。

有关ng-options 指令的更多信息，请参阅AngularJS ng-options API Reference。