Die ng-options in AngularJS
In diesem Tutorial werden die ng-options besprochen und wie wir sie verwenden können, um Optionen in Select mit AngularJS anzuzeigen.
Verwendung von ng-options in AngularJS
Die ng-options werden verwendet, um HTML-Elemente mit Optionen zu erstellen und an eine Modelleigenschaft zu binden. Wir verwenden ng-options, um Optionen in einer Auswahlliste anzugeben.
ng-options wurde speziell entwickelt, um die Elemente einer Dropdown-Liste zu füllen. Wir werden ein Beispiel durchgehen, in dem wir ein Dropdown-Menü erstellen, das ng-options verwendet, um die Optionen zu füllen.
Zuerst fügen wir die AngularJS-Bibliothek und die app.js-Datei mit script-Tags hinzu.
# AngularJS
<head>
<script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script src="app.js"></script>
</head>
Definieren Sie die AngularJS-Anwendung mit ng-app und den Controller mit ng-controller.
# AngularJS
<body ng-app="myApp">
<div ng-controller="myController"></div>
</body>
Jetzt erstellen wir in app.js unser Modul.
# AngularJS
var app = angular.module('myApp', []);
Wir werden einen Controller erstellen, der ein Array, selectedItem, definiert und zugewiesene Werte zu dem Array für Optionen in app.js hinzufügt.
# AngularJS
app.controller('myController', function($scope) {
$scope.lists = [];
$scope.selectedItem = { name: 'second', id: 5 };
$scope.lists = [{name: 'first', id: 3 },{ name: 'second', id: 5 },{ name: 'third', id: 7 }];
});
Zuletzt erstellen wir ein Frontend für unsere Anwendung.
# AngularJS
<p>selected item is : {{selectedItem}}</p>
<p> name of selected item is : {{selectedItem.name}} </p>
<select ng-model="selectedItem" ng-options="list.name for list in lists track by list.id"></select>
Ausgabe:
Im obigen Beispiel ist es sehr einfach, mit ng-options eine Liste von Optionen in select anzuzeigen. Wir müssen keine zusätzlichen Codezeilen schreiben, um ein Element auszuwählen, wenn ein Benutzer ein Element auswählt.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn