☰

ng-options を使用して値属性内の変数型を抑制するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon javascript angularjs
ng-options を使用して値属性内の変数型を抑制するにはどうすればよいでしょうか? 質問する

AngularJS 1.4.0-rc.1 を実行すると、ループ内の値にng-options変数の型が含まれます。

次のコードを参照してください。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.js">
</script>
<script>
  angular.module("selectOptionsTest", []).
    controller("SelectOptionsController", ["$scope", function($scope) {
      $scope.options = [
        {id: 1, label: "Item 1"},
        {id: 2, label: "Item 2"},
        {id: 3, label: "Item 3"}
      ];
    }]);
</script>
<div ng-app="selectOptionsTest" ng-controller="SelectOptionsController">
  <select ng-model="opt" ng-options="option.id as option.label for option in options">
  </select>
</div>

これにより、次のような HTML コードが生成されます。

<select ng-options="option.id as option.label for option in options" ng-model="option" class="ng-pristine ng-valid ng-touched">
  <option value="?" selected="selected"></option>
  <option value="number:1" label="Item 1">Item 1</option>
  <option value="number:2" label="Item 2">Item 2</option>
  <option value="number:3" label="Item 3">Item 3</option>
</select>

なぜ値の先頭に変数の型、つまり が付くのでしょうかnumber:? AngularJS の以前のバージョン (現在の安定版 1.3.15 など) では、属性には、およびのvalue期待値が入力されていました。123

これは 1.4.0-rc.1 のバグですか、それともこれらのケースは今後別の方法で処理する必要がありますか?

ベストアンサー1

明らかに指令の取り扱い方法が変更されましたngOptions。この変更については、AngularJS 1.4 への移行ノート変更点の詳しい説明については、コミットメッセージ:

:を使用する場合ngOptions、ディレクティブは要素の値として代理キーを適用します<option>。このコミットは、代理キーとして使用される実際の文字列を変更します。オプション コレクション内の項目を呼び出して計算された文字列を格納するようになりましたhashKey。以前は、コレクション内の項目のインデックスまたはキーでした。

(これは、不明なオプション値が select ディレクティブで表現される方法と一致しています。)

これまでに見たことがあるかもしれません:

<select ng-model="x" ng-option="i in items"> <option value="1">a</option> <option value="2">b</option> <option value="3">c</option> <option value="4">d</option> </select>

次のような感じになります:

<select ng-model="x" ng-option="i in items"> <option value="string:a">a</option> <option value="string:b">b</option> <option value="string:c">c</option> <option value="string:d">d</option> </select>

アプリケーション コードがこの値に依存している場合は (依存すべきではない)、これに対応するためにアプリケーションを変更する必要があります。track byの機能を使用するngOptionsと、保存されるキーを指定できる場合があります。

つまり、track by以前と同じ結果を得るには、 を使用する必要があります。質問の例を修正するには、次のようになります。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.js">
</script>
<script>
  angular.module("selectOptionsTest", []).
    controller("SelectOptionsController", ["$scope", function($scope) {
      $scope.options = [
        {id: 1, label: "Item 1"},
        {id: 2, label: "Item 2"},
        {id: 3, label: "Item 3"}
      ];
    }]);
</script>
<div ng-app="selectOptionsTest" ng-controller="SelectOptionsController">
  <select ng-model="opt" ng-options="option.id as option.label for option in options track by option.id">
  </select>
</div>

おすすめ記事