キーワードとは何ですか？キーワードの "as"とは何ですか？以下、上記のリストに基づいて

Question

$scope.items = [{ 
    id: 1, 
    label: 'aLabel', 
    subItem: { name: 'aSubItem' } 
}, { 
    id: 2, 
    label: 'bLabel', 
    subItem: { name: 'bSubItem' } 
}]; 

は、私が通常使用するものです。

<select ng-options="item in items" ng-model="selected"></select> 

非常に簡単、のように、私はitem.xxx

を使用して値にアクセスすることができます。しかし、以下の構文は何です：

<select ng-options="item as item.label for item in items" ng-model="selected"></select> 

asとforのキーワードはまったくぼやけていますか？私は本当にこれを説明する文書を見つけることができなかった、助けてください。

PS： 元の構文は<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>ですが、私はtrack byを削除しました。これは、ドキュメントから読んだことで分かります。

Answer 1

はここ<select>は、オプションを設定するために参照すべきオプションの一覧です。あなたはng-options="item as item.label for item in items"書くとき

$scope.items = [{ 
    id: 1, 
    label: 'aLabel', 
    subItem: { name: 'aSubItem' } 
}, { 
    id: 2, 
    label: 'bLabel', 
    subItem: { name: 'bSubItem' } 
}]; 

、あなたは、各項目がitem in itemsを使用してitemに割り当てられているitems、を反復処理しています。

だから、第一の反復のために、itemの値は次のようになります。

{ 
    id: 1, 
    label: 'aLabel', 
    subItem: { name: 'aSubItem' } 
} 

注item、この場合には対象であること。

<option>どのようにデータを取得しているか気にせず、表示する必要があるものだけを気にして、選択時にどの値を割り当てるかを指定します。したがって、itemを入力とし、対応する<option>要素を生成するforを使用してng-optionsと伝えます。

選択オプションで、入力をidにしたいとします。しかし、あなたのidの意味が分かっている人は、人間の読み方がわかります。この場合はlabelという意味のメッセージを表示したいでしょう。

オブジェクト全体を使用する代わりに、idのみを使用し、labelを使用してドロップダウンリストに表示するテキストを使用します。 今すぐにあなたのコードの変更：

ng-options="item.id as item.label for item in items"

だから、最終的にはHTMLはこのようなものになり、生成：

<select> 
 
    <option value="1">aLabel</option> 
 
    <option value="2">bLabel</option> 
 
</select>

Answer 2

あなたはngOptionsディレクティブhttps://docs.angularjs.org/api/ng/directive/ngOptions

Answer 3

<select ng-options="item as item.label for item in items" ng-model="selected"></select>で公式ドキュメントを見つけることができますが、ここで <select ng-options="item in items" ng-model="selected"></select>

しかし、最初のものはフレームワーク

に多くの明快さを与えていると機能的にほぼ同様ですitem as item.label for item in items,

「として」：item as item.labelは、selectタグのショーのオプションでitem.label、しかしitem.label全体対象項目を表すことを語っています。これは「の」オプションは、DOMでのみitem.labelを示しているにもかかわらず、他のプロパティ（ID、サブタイプなど）がng-model（または選択オプション）を使用してもアクセス可能であることを

を意味しますここfor item in items言及するときので来ますitem as item.label DOMはこれが何であるか分かりませんitemです。だから、これは明らかにitem.labelの声明でitemがオブジェクト配列$scope.itemsでobjectであると言っている（または単にDOMの用語でitmes）