AngularJS ช่วยให้คุณสามารถสร้างรายการแบบเลื่อนลงขึ้นอยู่กับรายการในอาร์เรย์หรือวัตถุ
การสร้างเลือกกล่องใช้ NG-ตัวเลือก
หากคุณต้องการที่จะสร้างรายการแบบเลื่อนลงขึ้นอยู่กับวัตถุหรืออาร์เรย์ใน AngularJS คุณควรใช้ ng-option คำสั่ง:
ตัวอย่าง
<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-ตัวเลือก VS NG-ซ้ำ
นอกจากนี้คุณยังสามารถใช้ ng-repeat คำสั่งที่จะทำให้รายการแบบเลื่อนลงเดียวกัน
เพราะ ng-repeat สั่งซ้ำบล็อกของรหัส HTML สำหรับแต่ละรายการในอาร์เรย์ก็สามารถนำมาใช้เพื่อสร้างทางเลือกในรายการแบบเลื่อน แต่ ng-options คำสั่งที่ถูกสร้างขึ้นโดยเฉพาะอย่างยิ่งสำหรับการกรอกรายการแบบเลื่อนที่มีตัวเลือกและมี อย่างน้อยหนึ่งได้เปรียบที่สำคัญ:
dropdowns ทำด้วย ng-options ช่วยให้ค่าที่เลือกจะเป็นวัตถุในขณะที่ทำจากเมนูแบบเลื่อนลง ng-repeat จะเป็นสตริงที่มี
ฉันจะทำอะไรใช้?
สมมติคุณมีอาร์เรย์ของวัตถุ:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
]; ng-repeat สั่งมีข้อ จำกัด ของมัน, ค่าที่เลือกจะต้องเป็น string:
ตัวอย่าง
ใช้ 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-options สั่งค่าที่เลือกจะสามารถวัตถุ:
ตัวอย่าง
ใช้ ng-options :
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>It's 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"}
};
ลองตัวเอง» ตัวเลือกในรายการแบบเลื่อนลงไม่ได้จะเป็นกุญแจสำคัญในคู่ -value ที่สำคัญก็ยังสามารถเป็นค่าหรือทรัพย์สินของวัตถุค่า A:
ตัวอย่าง
<select ng-model="selectedCar" ng-options=" y.brand for (x, y) in cars">
</select>
ลองตัวเอง»