【AnglarJS学習ノート】AnglarJS Select(選択ボックス)

5693 ワード
先端 アングラーJS JavaScript プロジェクト
AnglarJS Select(選択ボックス)
    アングラーJSは、配列またはオブジェクトを使用してドロップダウンリストオプションを作成することができます.
一、選択ボックスを作成するには、ng-optionsを使用します.
    AnglarJSで使えます. ng-option コマンドを使用してドロップダウンリストを作成します.リスト項目はオブジェクトと配列を通して循環的に出力されます.

















var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});



       ng-options      。
オンライン編集運転 
    ng-nitはデフォルトの選択値を設定します.
 
二、ng-optionsとng-repeat
    私達はng-repeatも使えます. コマンドでドロップダウンリストを作成します.

















var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});



         ng-repeat          。
オンライン編集運転
    ng-repeat コマンドは、配列を通してHTMLコードを循環させてドロップダウンリストを作成しますが、 ng-options コマンドはドロップダウンリストを作成するのに適しています.以下の利点があります.
使用 ng-options のオプションはオブジェクトです. ng-repeat は文字列です.
 
    以上の二つの中からどれを選んだらいいですか? 制限があります.選択した値は文字列です.












    :





     : {{selectedSite}}






var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
	    {site : "Google", url : "http://www.google.com"},
	    {site : "Runoob", url : "http://www.runoob.com"},
	    {site : "Taobao", url : "http://www.taobao.com"}
	];
});



         ng-repeat          ，          。
オンライン編集運転
 
    使用 ng-options コマンド、選択した値はオブジェクトで、 値をオブジェクトとして選択すると、より多くの情報を得ることができます.アプリケーションもより柔軟です.












    :





     : {{selectedSite.site}}


   : {{selectedSite.url}}






var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
	    {site : "Google", url : "http://www.google.com"},
	    {site : "Runoob", url : "http://www.runoob.com"},
	    {site : "Taobao", url : "http://www.taobao.com"}
	];
});



         ng-options           ，         。
 オンライン編集運転
 
三、データソースはオブジェクトです.
   前の例では、データソースとして配列を使用しています.以下、データオブジェクトをデータソースとして使用します.
    ng-options 使用対象は大きく異なります.データソースとして対象を使用します. x キーとして、 y 値のために、あなたが選んだ値はkey-valueです. はい、そうです value












      :





      : {{selectedSite}}






                  。



var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.sites = {
	    site01 : "Google",
	    site02 : "Runoob",
	    site03 : "Taobao"
	};
});
オンライン編集運転
 
value key-valueで はい、対象としてもいいです.選択した値はkey-valueにあります. はい、そうです value で、これはオブジェクトです.












     :





     : {{selectedCar.brand}}


  : {{selectedCar.model}}


  : {{selectedCar.color}}



           。





var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : {brand : "Ford", model : "Mustang", color : "red"},
        car02 : {brand : "Fiat", model : "500", color : "white"},
        car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
});
オンライン編集運転
 
    プルダウンメニューでも使わなくてもいいです. key-valueペアの中の key , オブジェクトの属性を直接使用:












     :