AngularJS は ngOption を使用してドロップダウンリストのサンプル code_AngularJS を実装します-jsチュートリアル-php.cn

AngularJS は ngOption を使用してドロップダウンリストのサンプル code_AngularJS を実装します

WBOY

リリース： 2016-05-16 15:18:35

オリジナル

1405 人が閲覧しました

ドロップダウンリストの簡単な使用

ng-option ディレクティブの使用は非常に簡単です:
の 2 つの属性をバインドするだけです。

1 つは選択された値を取得するために使用される ng-model

もう 1 つは、ドロップダウンリストを決定するために ng-options によって使用される要素の配列です。

<select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select>

ログイン後にコピー

上記のステートメントは、選択された値とengineer.currentActivityの間で双方向のデータバインディングを実行するもので、リスト内のオプションはアクティビティ内の各値になります。データは次のとおりです:

$scope.engineer = {
name: "Dani",
currentActivity: "Fixing bugs"
};
$scope.activities =
[
"Writing code",
"Testing code",
"Fixing bugs",
"Dancing"
];

ログイン後にコピー

操作結果は次のとおりです:

美しさのために、ここではブートストラップを引用します。

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-controller="EngineeringController" class="container">
<div class="col-md-12">
{{engineer.name}} is currently: {{ engineer.currentActivity}}
</div>
<div class="col-md-4">
<label for="name">Choose a new activity:</label>
<select ng-model="engineer.currentActivity" class="form-control"
ng-options="act for act in activities"> 
</select>
</div>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller("EngineeringController",["$scope",function($scope){
$scope.engineer = {
name: "Dani",
currentActivity: "Fixing bugs"
};
$scope.activities =
[
"Writing code",
"Testing code",
"Fixing bugs",
"Dancing"
];
}]);
</script>
</body>
</html>

ログイン後にコピー

複雑なオブジェクト、カスタムリスト名

ドロップダウンリストは単純な文字列配列ではなく、次のような json オブジェクトである場合があります。

$scope.activities =
[
{ id: 1, type: "Work" , name: "Writing code" },
{ id: 2, type: "Work" , name: "Testing code" },
{ id: 3, type: "Work" , name: "Fixing bugs" },
{ id: 4, type: "Play" , name: "Dancing" }
];

ログイン後にコピー

この時点で、バインドされたデータはここのデータと同じ形式である必要があります。たとえば、そのうちの 1 つを直接コピーします。

$scope.engineer = {
name: "Dani" ,
currentActivity: {
id: 3,
type: "Work" ,
name: "Fixing bugs"
}
};

ログイン後にコピー

もちろん、次のように直接指定することもできます:

$scope.engineer = {currentActivity:activities[3]}

ログイン後にコピー

次に、コマンド内で、リストが結合されるドロップダウンボックスの名前をループできます。

<select 
ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name +' (' + a.type + ')' for a in activities" > 
</select >

ログイン後にコピー

操作効果は次のとおりです:

すべてのコードは次のとおりです:





 






{{engineer.name}} is currently: {{ engineer.currentActivity}}


Choose a new activity: 
<select 
ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name +' (' + a.type + ')' for a in activities" > 
</select >

ログイン後にコピー

ドロップダウンリストのグループ化の実装

実際、グループ化は前の例と非常に似ていますが、スペース内の ng-options の値を次のように変更するだけです。

<select ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name group by a.type for a in activities" > 
</select >

ログイン後にコピー

グループ化を追加すると、次の値に従ってグループ化されます

すべてのコード:





 






{{engineer.name}} is currently: {{ engineer.currentActivity}}


Choose a new activity: 

<select ng-model = "engineer.currentActivity"
class="form-control"
ng-options = "a.name group by a.type for a in activities" > 
</select >

ログイン後にコピー

ID で識別

前の ng-model は最初に値を設定することに相当するためです。この初期値は、ドロップダウンリストオプションを選択すると上書きされます。

そのため、ID が識別に使用されることが多くなり、割り当てを初期化するときに ID を設定するだけで済みます。

$scope.engineer = {
currentActivityId: 3
};
$scope.activities =
[
{ id: 1, type: "Work" , name: "Writing code" },
{ id: 2, type: "Work" , name: "Testing code" },
{ id: 3, type: "Work" , name: "Fixing bugs" },
{ id: 4, type: "Play" , name: "Dancing" }
];

ログイン後にコピー

コマンドは次の形式で記述できます

<select 
ng-model = "engineer.currentActivityId"
class="form-control"
ng-options = "a.id as a.name group by a.type for a in activities" > 
</select >

ログイン後にコピー

as の前の値によって、唯一のオプションを決定できます

すべてのコードは次のとおりです:





 






current is: {{ engineer.currentActivityId}}


Choose a new activity: 
<select 
ng-model = "engineer.currentActivityId"
class="form-control"
ng-options = "a.id as a.name group by a.type for a in activities" > 
</select >

ログイン後にコピー

上記は、AngularJS でドロップダウンリストを実装するために ngOption を使用するためにエディターが共有したサンプルコードです。