0

これを機能させることができません：

<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) として表示します。

関数を呼び出して、そこに開始値を設定しようとしましたが、それでも効果はありません。

誰かがこれを修正する方法を説明してもらえますか.

4

4 に答える 4

0

無効なフィールドに 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>
于 2016-02-22T04:46:39.117 に答える
0

あなたはそれを修正することができます。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>

于 2016-02-22T04:30:04.350 に答える
0

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 はほとんど使用しないでください。ユーザーが選択すると、変数が再割り当てされます。これがフィドルです。ngOptions ディレクティブは非常に複雑に見える場合がありますが、ドロップダウン メニューや select タグ内の何かに適しています。

于 2016-02-22T04:51:57.530 に答える