Αναπτυσσόμενα μενού AngularJS

Το AngularJS επιτρέπει τη δημιουργία αναπτυσσόμενων μενού βασισμένων σε στοιχεία πίνακα ή αντικειμένων.

Δημιουργία πίνακα με ng-options

Αν θέλετε να δημιουργήσετε ένα αναπτυσσόμενο μενού βασισμένο σε αντικείμενο ή πίνακα στο AngularJS, πρέπει να χρησιμοποιήσετε ng-options Εντολή:

Παράδειγμα

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

Δοκιμάστε το Προσωπικά

ng-options με ng-repeat

Μπορείτε επίσης να χρησιμοποιήσετε ng-repeat Εντολή για τη δημιουργία του ίδιου αναπτυσσόμενου μενού:

Παράδειγμα

<select>
  <option ng-repeat="x in names">{{x}}</option>
</select>

Δοκιμάστε το Προσωπικά

Επειδή ng-repeat Η εντολή επαναλαμβάνει ένα κομμάτι κώδικα HTML για κάθε στοιχείο του πίνακα, οπότε μπορεί να χρησιμοποιηθεί για τη δημιουργία επιλογών σε αναπτυσσόμενα μενού, αλλά ng-options Η εντολή είναι σχεδιασμένη ειδικά για τη συμπλήρωση επιλογών σε αναπτυσσόμενα μενού.

Ποια πρέπει να χρησιμοποιήσετε;

Μπορείτε να χρησιμοποιήσετε ng-repeat Εντολή και ng-options Εντολή:

Ας υποθέσουμε ότι έχετε ένα δισκάρι αντικειμένων:

$scope.cars = [
  {model : "Ford Mustang", color : "red"},
  {model : "Fiat 500", color : "white"},
  {model : "Volvo XC90", color : "black"}
);

Παράδειγμα

Χρησιμοποιώντας ng-repeat:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>Επιλέξατε: {{selectedCar}}</h1>

Δοκιμάστε το Προσωπικά

Όταν χρησιμοποιείτε τιμή ως αντικείμενο, χρησιμοποιήστε ng-value με value:

Παράδειγμα

θα αντικαταστήσει ng-repeat χρησιμοποιώντας ως αντικείμενο:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>Επιλέξατε ένα {{selectedCar.color}} {{selectedCar.model}}</h1>

Δοκιμάστε το Προσωπικά

Παράδειγμα

Χρησιμοποιώντας ng-options:

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>Επιλέξατε: {{selectedCar.model}}</h1>
<p>Το χρώμα του είναι: {{selectedCar.color}}</p>

Δοκιμάστε το Προσωπικά

Όταν η επιλεγμένη τιμή είναι αντικείμενο, μπορεί να περιέχει περισσότερες πληροφορίες και η εφαρμογή σας μπορεί να είναι πιο ευέλικτη.

Θα χρησιμοποιήσουμε στο συγκεκριμένο tutorial ng-options οδηγία.

Καθώς πηγή δεδομένων αντικειμένων

Στο προηγούμενο παράδειγμα, η πηγή δεδομένων ήταν κατάλογος, αλλά μπορούμε να χρησιμοποιήσουμε και αντικείμενα.

Ας υποθέσουμε ότι έχετε ένα αντικείμενο με ζεύγους κλειδιών τιμών:

$scope.cars = {
  car01 : "Ford",
  car02 : "Fiat",
  car03 : "Volvo"
};

ng-options η έκφραση των χαρακτηριστικών για τα αντικείμενα είναι λίγο διαφορετική:

Παράδειγμα

Χρησιμοποιώντας αντικείμενα ως πηγές δεδομένωνx προσωπικοί σύμβολοι:y προσωπικοί σύμβολοι:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>Επιλέξατε: {{selectedCar}}</h1>

Δοκιμάστε το Προσωπικά

Η επιλεγμένη τιμή θα είναι πάντα η τιμή του αλφαβητικού ζεύγουςΤιμή.

η τιμή του αλφαβητικού ζεύγουςΤιμήίσως να είναι και αντικείμενο:

Παράδειγμα

Η επιλεγμένη τιμή θα παραμείνει η τιμή του αλφαβητικού ζεύγουςΤιμήΑυτή τη φορά είναι ένα αντικείμενο:

$scope.cars = {
  car01 : {brand : "Ford", model : "Mustang", color : "red"},
  car02 : {brand : "Fiat", model : "500", color : "white"},
  car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

Δοκιμάστε το Προσωπικά

Οι επιλογές της αναπτυσσόμενης λίστας δεν πρέπει να είναι ζευγάρι κλειδιού τιμήςΚλειδίΜπορεί επίσης να είναι τιμή ή ιδιότητα του αντικειμένου τιμής:

Παράδειγμα

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>

Δοκιμάστε το Προσωπικά