AngularJS の ng-options で value 属性を設定するにはどうすればよいですか?

AngularJS の ng-options での値の設定

AngularJS の ng-options ディレクティブを使用すると、開発者は のオプションを設定できます。タグ。よくある質問の 1 つは、各オプションの value 属性をどのように設定するかということです。

値の設定メカニズムを理解するために、ngOptions の構文を詳しく調べてみましょう。次のいずれかの形式の式を受け取ります:

配列の場合:

label for value in array

オブジェクトの場合:

label for (key, value) in object

次の配列の例を考えてみましょう:

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

ng-options を使用してオプションを埋めるには、次のように記述できます:

<select ng-options="obj.text as obj.value for obj in array"></select>

この場合、obj.value によって選択された値が決まります。

更新: 値式による追跡

最近の AngularJS 更新により、track by を使用して value 属性の値を明示的に指定できるようになりました。式:

<select ng-options="obj.text for obj in array track by obj.value"></select>

構文の覚え方

ngOptions の構文を思い出すのは難しい場合があります。これを Python のリスト内包表記の拡張バージョンと考えるとわかりやすいでしょう:

[x**2 for x in [1, 2, 3, 4, 5]]

ただし、ng-options では、as キーワードを使用して各オプションに表示される値とテキストを区別します。

person.id as person.name for person in people

JavaScript オブジェクトの場合、構文は同様で、(キー、値) ペアを使用します。

for (key, value) in object

以上がAngularJS の ng-options で value 属性を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：構成ファイルの作成とデータの解析のための JSON 拡張機能 次の記事：React Refs の高度な使用法: 正規化、クローン作成、リンク

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

2

1773

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

10

1916

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1628

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1539

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1574

関連トピック

詳細>

• location.reloadの使用法
• アバストが誤検知を報告した場合の対処方法
• Excelをvcfに変換する方法
• クラウドスペースとは
• matlab カラーマップ関数の使用法
• ホームページを変更できない理由
• PHP業界で働くにはどのようなスキルが必要ですか?
• InsertIntoステートメントの書き方

人気のおすすめ

• jsはどういう意味ですか
• jsで文字列を配列に変換するにはどうすればよいですか?
• JavaScriptを使用してページを更新する方法
• js配列内の項目を削除する方法
• sqrt関数の使い方

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1416672
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4257179
• 
  JAVA 初心者向けビデオチュートリアル

  2474782
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  503268
• 
  PHP ゼロベースの入門チュートリアル

  844021

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1416672 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2474782 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  503268 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  215252 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  876593 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  6333 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  4957 回の学習
• 
  Go言語実践GraphQL

  4161 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  632 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  21212 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

私たちについて 免責事項 Sitemap

PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！