AngularJS เลือก (กล่องกา)

AngularJS สามารถสร้างรายการแบบหล่นลงของตัวเลือกที่จะใช้อาร์เรย์หรือวัตถุ

สร้างกล่องเลือกใช้ NG-ตัวเลือก

ใน AngularJS เราสามารถใช้คำสั่งNG-ตัวเลือกในการสร้างรายการแบบหล่นลงในรายการผ่านวัตถุและอาร์เรย์วงจรของการส่งออกต่อไปตัวอย่าง:

ตัวอย่าง

var App = angular.module ( 'MyApp' []);
app.controller ( 'myCtrl' ฟังก์ชั่น ( $ ขอบเขต) {
$ scope.names = [ "Google", "w3big", "Taobao"];
});

</ script>

ลอง»

NG-เลือกและ NG-ซ้ำ

นอกจากนี้เรายังสามารถใช้คำสั่งNG-ซ้ำเพื่อสร้างรายการแบบหล่นลง:

ตัวอย่าง

<เลือก>
<option NG-ซ้ำ = "x ในชื่อ"> {{X}} </ option>
</ เลือก>

ลอง»

การเรียนการสอนNG-ซ้ำคือการห่วงผ่านอาร์เรย์ของรหัส HTML การสร้างรายการแบบหล่นลง แต่ NG-ตัวเลือกคำสั่งดีเหมาะสำหรับการสร้างรายการแบบหล่นลงก็มีข้อดีดังต่อไปนี้:

วัตถุโดยใช้ตัวเลือก NG-ตัวเลือกNG-ซ้ำเป็นสตริง

มันควรจะใช้แบบไหนดีกว่า

สมมติว่าเราใช้วัตถุต่อไปนี้:

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "w3big", url : "http://www.w3big.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

NG-ซ้ำมีข้อ จำกัด ของมูลค่าได้รับการแต่งตั้งเป็นสตริง:

ตัวอย่าง

ใช้NG-ซ้ำ:

<เลือกรุ่น NG-= "selectedSite ">
<option NG-ซ้ำ = "x ในเว็บไซต์" value = "{{}} x.url"> {{x.site}} </ option>
</ เลือก>

<h1> ทางเลือกของคุณคือ: {{selectedSite}} </ h1>

ลอง»

ใช้คำสั่งNG-ตัวเลือกให้เลือกค่าของวัตถุ:

ตัวอย่าง

ใช้NG-ตัวเลือก:

<เลือกรุ่น NG-= "selectedSite " NG-ตัวเลือก = "x.site สำหรับ X ในเว็บไซต์">
</ เลือก>

<h1> ทางเลือกของคุณคือ: {{selectedSite.site}} </ h1>
<p> URL คือ: {{selectedSite.url}} </ p>

ลอง»

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

วัตถุแหล่งข้อมูล

ตัวอย่างก่อนหน้านี้เราใช้อาร์เรย์เป็นแหล่งข้อมูลที่เรามีวัตถุข้อมูลต่อไปนี้เป็นแหล่งข้อมูล

$scope.sites = {
    site01 : "Google",
    site02 : "w3big",
    site03 : "Taobao"
};

NG-ตัวเลือกการใช้วัตถุมีความแตกต่างดังนี้

ตัวอย่าง

โดยใช้วัตถุที่เป็นแหล่งข้อมูล,x เป็นกุญแจสำคัญ (Key),y เป็นค่า (บาท):

<เลือกรุ่น NG-= "selectedSite " NG-ตัวเลือก = "X สำหรับ (x, y) ในเว็บไซต์">
</ เลือก>

<h1> ค่าที่คุณเลือก: {{selectedSite}} </ h1>

ลอง»

ทางเลือกของคุณคุ้มค่าในคู่ค่าคีย์

ค่าในคู่ค่าแป้นพิมพ์ยังสามารถเป็นเป้าหมาย:

ตัวอย่าง

เลือกค่าในมูลค่าของค่าแป้นพิมพ์ซึ่งคือว่ามันเป็นวัตถุ:

$ Scope.cars = {
car01: {แบรนด์ "ฟอร์ด" รุ่น "มัสแตง" สี "สีแดง"},
car02: {ยี่ห้อ: "Fiat" รุ่น "500" สี "สีขาว"},
car03: {ยี่ห้อ: "Volvo" รุ่น "XC90" สี "สีดำ"}
};

ลอง»

อาจไม่สามารถใช้คู่ -value ปุ่มใช้คุณสมบัติของวัตถุโดยตรงในเมนูแบบเลื่อนลงไปนี้: