ホームページ > ウェブフロントエンド > jsチュートリアル > select を使用してデータをロードし、AngularJS でデフォルト値を選択するにはどうすればよいですか?

select を使用してデータをロードし、AngularJS でデフォルト値を選択するにはどうすればよいですか?

亚连
リリース: 2018-06-02 17:36:14
オリジナル
2225 人が閲覧しました

以下に、AngularJS select でデータをロードしてデフォルト値を選択する方法に関する記事を共有します。これは優れた参考値なので、皆さんのお役に立てれば幸いです。

問題の説明:

プロジェクトを開発する過程で、select ドロップダウン ボックスの使用を避けることはできません。それでは、angular で select を使用するにはどうすればよいでしょうか。

解決策:

ng-options を使用してオプションを動的にロードし、ng-model を使用して一致させることができます。コードは次のとおりです:

//html
<select ng-model="role_id1" ng-options="o.name for o in list5"></select>
//js
$scope.list5 = [{"id":2,"name":"终端代表"},{"id":3,"name":"片区管理员"},{"id":4,"name":"系统管理员"},{"id":5,"name":"销售市场经理"}]
ログイン後にコピー

次のように空のオプションが表示されます:

次に、コードに簡単な調整を加えます:

<select ng-model="role_id1" ng-options="o.id as o.name for o in list5"></select>
ログイン後にコピー

成功! !

2 つの画像の違いは、2 つの画像の値が異なることです。最初の値はオブジェクトで、後続の値はバインディング値に直接関係する ID 値です。 NGモデルの。

上記は私があなたのためにまとめたものです。

関連記事:

vue コンテンツをクリップボードにコピーする方法

vue 現在アクティブ化されているルートを取得する方法

vue 各ページのレンダリング後、div のスクロールバーを下部に維持する

以上がselect を使用してデータをロードし、AngularJS でデフォルト値を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート