AngularJS เลือกกล่อง
AngularJS ให้คุณสร้างรายการดรอปดาวน์ตามรายการในอาร์เรย์หรือวัตถุ
การสร้าง Select Box โดยใช้ 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-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>You selected: {{selectedCar}}</h1>
เมื่อใช้ค่าเป็นอ็อบเจ็กต์ ให้ใช้ng-valueinsead of value:
ตัวอย่าง
ใช้ng-repeatเป็นวัตถุ:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>
ตัวอย่าง
การใช้ng-options:
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>
เมื่อค่าที่เลือกเป็นออบเจ็กต์ ค่านั้นสามารถเก็บข้อมูลเพิ่มเติม และแอปพลิเคชันของคุณจะมีความยืดหยุ่นมากขึ้น
เราจะใช้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>You selected: {{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>