Kotak pilihan AngularJS

AngularJS memungkinkan Anda membuat daftar tarik turun berdasarkan item di dalam array atau objek.

Membuat kotak pilihan menggunakan ng-options

Jika Anda ingin membuat daftar tarik turun berdasarkan objek atau array di AngularJS, Anda harus menggunakan ng-options Instruksi:

Contoh

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

Coba Sendiri

ng-options dengan ng-repeat

Anda juga dapat menggunakan ng-repeat Instruksi untuk membuat daftar tarik turun yang sama:

Contoh

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

Coba Sendiri

Karena ng-repeat Instruksi merepeta kode HTML untuk setiap item di dalam array, sehingga dapat digunakan untuk membuat opsi di dalam daftar tarik turun, tetapi ng-options Instruksi dirancang khusus untuk mengisi opsi dalam daftar tarik turun.

Harus menggunakan yang mana?

Anda dapat menggunakan ng-repeat Instruksi dan ng-options Instruksi:

Dengan asumsi Anda memiliki array objek:

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

Contoh

Menggunakan ng-repeat:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>Anda memilih: {{selectedCar}}</h1>

Coba Sendiri

Ketika menggunakan nilai sebagai objek, gunakan ng-value dengan value:

Contoh

Ganti ng-repeat Disebalikkan sebagai objek:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>Anda memilih {{selectedCar.color}} {{selectedCar.model}}</h1>

Coba Sendiri

Contoh

Menggunakan ng-options:

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>Anda memilih: {{selectedCar.model}}</h1>
<p>Warna nya adalah: {{selectedCar.color}}</p>

Coba Sendiri

Ketika nilai yang dipilih adalah objek, ia dapat mengandung informasi lebih banyak, dan aplikasi Anda akan lebih fleksibel.

Kami akan menggunakan ng-options instruksi.

Sebagai sumber data objek

Dalam contoh sebelumnya, sumber data adalah array, namun kami juga dapat menggunakan objek.

Dengan asumsi Anda memiliki objek dengan pasangan kunci nilai:

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

ng-options ekspresi properti untuk objek sedikit berbeda:

Contoh

Menggunakan objek sebagai sumber data,x mewakili kunci,y mewakili nilai:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>Anda memilih: {{selectedCar}}</h1>

Coba Sendiri

Nilai yang dipilih akan selalu menjadi pasangan kunci nilai di dalamNilai.

pasangan kunci nilai di dalamNilaijuga dapat menjadi objek:

Contoh

Nilai yang dipilih tetap akan menjadi pasangan kunci nilai di dalamNilai，tetapi kali ini ia adalah objek:

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

Coba Sendiri

Pilihan dalam daftar pilihan turun tidak harus berupa pasangan kunci nilainyaKunci，boleh saja berupa nilai, atau properti objek nilai:

Contoh

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

Coba Sendiri