AngularJS Aşağıya Doğru Liste

AngularJS, diziler veya nesnelerdeki öğelere dayalı aşağıya doğru listeler oluşturmanıza izin verir.

Ng-options ile aşağıya doğru liste oluşturma

AngularJS'te nesne veya dizilerine dayalı aşağıya doğru listeler oluşturmak istiyorsanız, ng-options Talimat:

Örnek

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

Kendi Kendine Deneyin

ng-options ile ng-repeat

Ayrıca ng-repeat Aynı aşağıya doğru listeyi oluşturmak için talimatı kullanabilirsiniz:

Örnek

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

Kendi Kendine Deneyin

Çünkü ng-repeat Talimat, dizideki her bir öğeye bir HTML kodunu tekrar eder, bu yüzden aşağıya doğru listelerde seçenekler oluşturmak için kullanılabilir, ancak ng-options Talimat, aşağıya doğru listelerde seçenek doldurma için özel olarak tasarlanmıştır.

Hangisini kullanmanız gerekiyor?

Kullanabilirsiniz: ng-repeat Talimat ve ng-options Talimat:

假设您有一个对象数组：

假设您有一个对象数组：
  $scope.cars = [
  {model : "Ford Mustang", color : "red"},
  {model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}

Örnek

Kullanarak ng-repeat：

<select ng-model="selectedCar">
  ];
</select>
<h1>Seçtiğiniz: {{selectedCar}}</h1>

Kendi Kendine Deneyin

<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option> Değer olarak nesne kullanıldığında, kullanın ng-value yedek：

Örnek

Değer ng-repeat Nesne olarak kullanılır:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>Seçtiğiniz: {{selectedCar.color}} {{selectedCar.model}}</h1>

Kendi Kendine Deneyin

Örnek

Kullanarak ng-options：

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>Seçtiğiniz: {{selectedCar.model}}</h1>
<p>Renkleri: {{selectedCar.color}}</p>

Kendi Kendine Deneyin

Seçilen değer nesne olduğunda, daha fazla bilgi içerebilir ve uygulamanız daha esnek hale gelebilir.

Bu rehberde kullanacağız ng-options Düzenleyici.

Nesne olarak veri kaynağı

Önceki örnekte veri kaynağı diziydi, ancak nesne de kullanabiliriz.

Anlaşıldığı üzere bir anahtar değer çifti içeren bir nesne sahip olduğunuzu varsayalım:

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

ng-options Nesne için ifadelerde biraz farklılık vardır:

Örnek

Nesne olarak veri kaynağı kullanarakx Anahtar temsil eder:y Değer temsil eder:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>Seçtiğiniz: {{selectedCar}}</h1>

Kendi Kendine Deneyin

Seçilen değer her zaman anahtar değer çiftinde olacaktırdeğer.

Anahtar değer çiftindedeğerAyrıca bir nesne olabilir:

Örnek

Seçilen değer hala anahtar değer çiftinde olacaktırdeğerBu sefer bir nesne:

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

Kendi Kendine Deneyin

Açılır menüdeki seçenekler anahtar değer çiftinde olmamak zorunda değildirAnahtardeğer olabilir, veya değer nesnesinin özellikleri olabilir:

Örnek

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

Kendi Kendine Deneyin