AngularJS verwendet ngOption, um den Dropdown-Listen-Beispielcode_AngularJS zu implementieren-js-Tutorial-php.cn

AngularJS verwendet ngOption, um den Dropdown-Listen-Beispielcode_AngularJS zu implementieren

WBOY

Freigeben： 2016-05-16 15:18:35

Original

1430 Leute haben es durchsucht

Einfache Verwendung von Dropdown-Listen

Die

ng-option-Direktive ist sehr einfach zu verwenden. Sie müssen nur zwei Attribute binden:

Eines ist das ng-Modell, das verwendet wird, um den ausgewählten Wert zu erhalten

Das andere ist das Array von Elementen, das von ng-options verwendet wird, um die Dropdown-Liste zu bestimmen.

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

Nach dem Login kopieren

Die obige Anweisung besteht darin, eine bidirektionale Datenbindung zwischen dem ausgewählten Wert und „engineer.currentActivity“ durchzuführen, und dann sind die Optionen in der Liste jeder Wert in Aktivitäten. Die Daten lauten wie folgt:

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

Nach dem Login kopieren

Die Operationsergebnisse sind wie folgt:

Der Schönheit halber wird hier Bootstrap zitiert.

<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>

Nach dem Login kopieren

Komplexes Objekt, benutzerdefinierter Listenname

Manchmal ist die Dropdown-Liste kein einfaches String-Array, sondern kann ein JSON-Objekt sein, zum Beispiel:

$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" }
];

Nach dem Login kopieren

Zu diesem Zeitpunkt müssen die gebundenen Daten im gleichen Format wie die Daten hier vorliegen. Kopieren Sie beispielsweise direkt eine davon:

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

Nach dem Login kopieren

Natürlich können Sie es auch direkt angeben als:

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

Nach dem Login kopieren

Dann können Sie im Befehl die Namen der Dropdown-Felder durchlaufen, in denen die Liste zusammengefügt ist

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

Nach dem Login kopieren

Der Betriebseffekt ist wie folgt:

Alle Codes lauten wie folgt:





 






{{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 >

Nach dem Login kopieren

Implementierung der Gruppierung von Dropdown-Listen

Tatsächlich ist die Gruppierung dem vorherigen Beispiel sehr ähnlich. Ändern Sie einfach den Wert von ng-options im Leerzeichen wie folgt:

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

Nach dem Login kopieren

Gruppieren nach hinzufügen und es wird nach dem folgenden Wert gruppiert

Alle Codes:





 






{{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 >

Nach dem Login kopieren

Anhand der ID identifizieren

Weil das vorherige NG-Modell dem anfänglichen Festlegen eines Werts entspricht. Dieser Anfangswert wird überschrieben, wenn Sie eine Dropdown-Listenoption auswählen.

Daher wird häufiger eine ID zur Identifizierung verwendet, sodass Sie bei der Initialisierung der Zuweisung nur eine ID festlegen müssen.

$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" }
];

Nach dem Login kopieren

Der Befehl kann im folgenden Format geschrieben werden

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

Nach dem Login kopieren

Durch den Wert vor as können Sie die einzige Option bestimmen

Alle Codes lauten wie folgt:





 






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 >

Nach dem Login kopieren

Das Obige ist der Beispielcode, den der Editor mit Ihnen geteilt hat, um ngOption zum Implementieren einer Dropdown-Liste in AngularJS zu verwenden. Ich hoffe, er wird Ihnen hilfreich sein.