รายการลงชื่อต่อเนื่อง 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>

ทดลองด้วยตัวเอง

เมื่อค่าที่เลือกเป็นวัตถุ มันสามารถมีข้อมูลเพิ่มเติม และโปรแกรมของคุณจะมีความยอมรับที่ดีขึ้น

เราจะใช้ 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>

ทดลองด้วยตัวเอง