Angularjs เลือก (เลือกกล่อง)
AngularJs สามารถใช้อาร์เรย์หรือวัตถุเพื่อสร้างตัวเลือกรายการแบบดรอปดาวน์
ใช้ตัวเลือก NG เพื่อสร้างกล่องเลือก
ใน AngularJS เราสามารถใช้ NG-Option Directive เพื่อสร้างรายการดรอปดาวน์และรายการรายการจะวนซ้ำผ่านวัตถุและอาร์เรย์ดังที่แสดงในตัวอย่างต่อไปนี้:
ตัวอย่าง
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <select ng-model = "selectedName" ng-options = "x สำหรับ x ในชื่อ"> </select> </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl "taobao"];}); </script> <p> ตัวอย่างนี้แสดงให้เห็นถึงการใช้คำสั่ง ng-options </p> </body> </html>ผลการทำงาน:
ตัวอย่างนี้แสดงให้เห็นถึงการใช้คำสั่ง NG-options
ตัวเลือก NG และ NG-repeat
นอกจากนี้เรายังสามารถใช้ NG-Repeat Directive เพื่อสร้างรายการดรอปดาวน์:
ตัวอย่าง
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <select> <opption ng-repeat = "x ในชื่อ"> {{x}} </ตัวเลือก> </select> </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrll "taobao"];}); </script> <p> ตัวอย่างนี้แสดงให้เห็นโดยใช้คำสั่ง NG-repeat เพื่อสร้างรายการแบบหล่นลง </p> </body> </html>ผลการทำงาน:
ตัวอย่างนี้แสดงให้เห็นว่าการใช้คำสั่ง NG-Repeat เพื่อสร้างรายการแบบดรอปดาวน์
Directive NG-Repeat ใช้อาร์เรย์เพื่อวนรหัส HTML เพื่อสร้างรายการแบบเลื่อนลง แต่คำสั่ง NG-Options นั้นเหมาะสมกว่าสำหรับการสร้างรายการแบบเลื่อนลงและมีข้อดีดังต่อไปนี้:
วัตถุที่ใช้ตัวเลือก NG-options, NG-Repeat เป็นสตริง
อันไหนควรจะดีกว่า?
สมมติว่าเราใช้วัตถุต่อไปนี้:
$ scope.sites = [{เว็บไซต์: "Google", url: "http://www.google.com"}, {ไซต์: "runoob", url: "http://www.runoob.com"}, {ไซต์: "taobao"NG-Repeat มีข้อ จำกัด และค่าที่เลือกคือสตริง:
ตัวอย่าง
ใช้ NG-repeat:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> เลือกเว็บไซต์: </p> <เลือก ng-model = "selectedSite"> <ตัวเลือก ng-repeat = "x in sites" value = "{x.url}}"> {{x.site}} {{selectedSite}} </h1> </div> <pristr> var app = angular.module ('myapp', []); app.controller ('myctrl', ฟังก์ชั่น ($ scope) {$ scope.sites = [site: "google", url: "http://www.runoob.com"}, {ไซต์: "taobao", url: "http://www.taobao.com"}];}); </p> </body> </html>เอฟเฟกต์การทำงาน:
เลือกเว็บไซต์:
ทางเลือกของคุณคือ: http://www.google.com
ตัวอย่างนี้แสดงให้เห็นว่าการใช้คำสั่ง NG-Repeat เพื่อสร้างรายการแบบหล่นลงโดยค่าที่เลือกเป็นสตริง
การใช้ NG-Options Directive ค่าที่เลือกเป็นวัตถุ:
ตัวอย่าง
ใช้ตัวเลือก NG:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> เลือกเว็บไซต์: </p> <เลือก ng-model = "selectedSite" ng-options = "x.site สำหรับ x ในไซต์"> </select> <h1> {{selectedSite.url}} </p> </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', ฟังก์ชั่น ($ scope) {$ scope.sites = [{site: "google", url: : "http://www.runoob.com"}, {ไซต์: "taobao", url: "http://www.taobao.com"}];}); </p> </body> </html>เอฟเฟกต์การทำงาน:
เลือกเว็บไซต์:
คุณเลือก: Google
URL คือ: http://www.google.com
ตัวอย่างนี้แสดงให้เห็นถึงการใช้คำสั่ง NG-Options เพื่อสร้างรายการแบบดรอปดาวน์โดยมีค่าที่เลือกเป็นวัตถุ
เมื่อเลือกค่าเป็นวัตถุเราสามารถรับข้อมูลเพิ่มเติมและแอปพลิเคชันมีความยืดหยุ่นมากขึ้น
แหล่งข้อมูลเป็นวัตถุ
ในตัวอย่างก่อนหน้านี้เราใช้อาร์เรย์เป็นแหล่งข้อมูลและด้านล่างเราใช้วัตถุข้อมูลเป็นแหล่งข้อมูล
$ scope.sites = {site01: "Google", site02: "runoob", site03: "taobao"};ตัวเลือก NG ใช้วัตถุที่แตกต่างกันมากดังนี้:
ตัวอย่าง
ใช้วัตถุเป็นแหล่งข้อมูล X คือคีย์และ y คือค่า:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> เว็บไซต์ที่คุณเลือกคือ: </p> <เลือก ng-model = "selectedSite" ng-options = "x สำหรับ (x, y) ในไซต์"> </select> <h1> ค่าที่คุณเลือก </p> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', ฟังก์ชั่น ($ scope) {$ scope.sites = {site01: "google", site02: "runoob", site03: "taobao"};};เอฟเฟกต์การทำงาน:
เว็บไซต์ที่เลือกคือ:
ค่าที่คุณเลือกคือ: Google
ตัวอย่างนี้แสดงให้เห็นถึงการใช้วัตถุเป็นรายการสร้างแบบเลื่อนลง
ค่าที่คุณเลือกคือค่าในคู่คีย์-ค่า
ค่ายังสามารถเป็นวัตถุในคู่คีย์-ค่า:
ตัวอย่าง
ค่าที่เลือกอยู่ในค่าของคู่คีย์-ค่าซึ่งเป็นวัตถุ:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> เลือกรถ: </p> <เลือก ng-model = "selectedCar" ng-options = "x สำหรับ (x, y) ในรถยนต์"> </select> <h1> คุณเลือก: {{selectedCar.Brand}} </h1> {{selectedCar.Model}} </h2> <h3> สี: {{selectedCar.Color}} </h3> <p> โปรดทราบว่าค่าที่เลือกเป็นวัตถุ </p> </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', ฟังก์ชั่น ($ scope) {$ scope.cars = {car01: {แบรนด์: Car03: {Brand: "Volvo", รุ่น: "XC90", Color: "Black"}}}); </script> </body> </html>ผลการทำงาน:
เลือกรถ
คุณเลือก: fiat
รุ่น: 500
สี: สีขาว
หมายเหตุ: ค่าที่เลือกเป็นวัตถุ
นอกจากนี้คุณยังสามารถใช้คีย์ในคู่คีย์-ค่าแทนการใช้คู่คีย์-ค่าและใช้คุณสมบัติของวัตถุโดยตรง:
ตัวอย่าง:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> เลือกรถ: </p> <เลือก ng-model = "selectedCar" ng-options = "y.brand สำหรับ (x, y) ในรถยนต์"> </select> <p> {{selectedCar.Model}} </p> <p> สีคือ: {{selectedCar.Color}} </p> <p> ตัวเลือกในรายการดรอปดาวน์อาจเป็นแอตทริบิวต์ของวัตถุ </p> </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', ฟังก์ชั่น ($ scope) {$ scope.cars = {car01: {แบรนด์: Car03: {Brand: "Volvo", รุ่น: "XC90", Color: "Black"}}}); </script> </body> </html>ผลการทำงาน:
เลือกรถ:
ทางเลือกของคุณคือ: ฟอร์ด
รุ่น: มัสแตง
สีคือ: สีแดง
ตัวเลือกในรายการดรอปดาวน์อาจเป็นคุณลักษณะของวัตถุ
ข้างต้นเป็นการรวบรวมข้อมูลที่เลือก AngularJS และเราจะเพิ่มในภายหลัง ฉันหวังว่ามันจะช่วยเพื่อนที่ต้องการได้