ホームページ > ウェブフロントエンド > jsチュートリアル > angularjsでselect assign ng-options構成メソッドを使用するにはどうすればよいですか?

angularjsでselect assign ng-options構成メソッドを使用するにはどうすればよいですか?

亚连
リリース: 2018-06-02 17:31:54
オリジナル
2380 人が閲覧しました

ここで、angularjs select assign ng-options の設定方法を共有します。これは良い参考値であり、皆さんの役に立つことを願っています。

配列メソッド

データは配列です

$scope.years = [2014, 2015, 2016];
ログイン後にコピー

ページ要素

 <select ng-model="item" ng-options="item as y for y in years">
 </select>
ログイン後にコピー

デフォルト値を設定

デフォルトのオプションを設定する必要がある場合は、最初に設定できます 1 つのパラメータ:

$scope.item = 2016;
$scope.years = [2014, 2015, 2016];
ログイン後にコピー

オブジェクト配列メソッド

データはオブジェクト配列です

$scope.sites = [
 {site : "baidu", url : "https://www.baidu.com"},
 {site : "163", url : "http://www.163.com"},
 {site : "sina", url : "http://www.sina.com"}
];
ログイン後にコピー

ページ要素

りー

デフォルトを設定する

デフォルトのオプションを設定する必要がある場合は、最初にパラメータを設定できます:

 <select ng-model="s.site" ng-options="s.site as s.site group by site.group for s in sites">
 </select>
ログイン後にコピー

Key-Vules オブジェクト配列メソッド

データはオブジェクト配列です

$scope.site = "163";
$scope.sites = [
 {site : "baidu", url : "https://www.baidu.com"},
 {site : "163", url : "http://www.163.com"},
 {site : "sina", url : "http://www.sina.com"}
];
ログイン後にコピー

ページ要素

$scope.cars = {
car1 : {brand : "BYD", model : "Y50", color : "red"},
car2 : {brand : "CC", model : "HF", color : "white"},
car3 : {brand : "JL", model : "JL10D", color : "black"}
};
ログイン後にコピー

デフォルト値を設定します

デフォルトのオプションを設定する必要がある場合は、最初にパラメータを設定できます:

<select ng-model="myCar" ng-options="y.brand for (x, y) in cars">
</select>
ログイン後にコピー

angularjs ng-options 公式 API

グループタイプ:

$scope.site = "BYD";
$scope.cars = {
car1 : {brand : "BYD", model : "Y50", color : "red"},
car2 : {brand : "CC", model : "HF", color : "white"},
car3 : {brand : "JL", model : "JL10D", color : "black"}
};
ログイン後にコピー

オブジェクトタイプ:

label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr
ログイン後にコピー

上記は私が皆さんのためにまとめたものです。役に立つ未来のみんなへ。

関連記事:

NodeJSの親プロセスと子プロセスのリソース共有原理と実装方法

vue axiosの画像アップロードのフォーム送信例

vueで画像とファイルのアップロードを実装するサンプルコード

以上がangularjsでselect assign ng-options構成メソッドを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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