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。这不适用于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>

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。

使用禁用选项使用Angular设置select-controller的ng-init值

4 个答案: