AngularJs บทนำ
AngularJS เป็นกรอบ JavaScript สามารถเพิ่มไปยังหน้า HTML ผ่านแท็ก <Script>
AngularJS ขยาย HTML ผ่านคำสั่งและผูกข้อมูลกับ HTML ผ่านนิพจน์
AngularJS เป็นกรอบ JavaScript
AngularJS เป็นกรอบ JavaScript มันเป็นห้องสมุดที่เขียนใน JavaScript
AngularJS ถูกเผยแพร่เป็นไฟล์ JavaScript และสามารถเพิ่มลงในหน้าเว็บผ่านแท็กสคริปต์:
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script>
ต่อไปนี้มีไว้สำหรับการแนะนำฟังก์ชั่นแท็กการกรองหน้า AngularJS ในบทความนี้ โปรดดูการแนะนำต่อไปนี้เกี่ยวกับเนื้อหาสำคัญ:
หน้า html:
<div> <div> หมวดหมู่ข่าว </div> <button ng-click = "Clean ()"> Clear </button> </div> <ion-content scroll = "false"> <ul> <li> <p> ประเทศและภูมิภาค: </p> <ul> ng-click = "onclick (regionsName.name, regionsName.Checked)"> <อินพุต type = "ช่องทำเครื่องหมาย" value = "regionsName.name" ng-checked = "regionsName.Checked"/> <span> {{regionsName.cn}} </span> </li></ul> </li> <li> <p> เมืองหลวง: </p> <ul> ng-click = "onclick (capitalsName.name, capitalsName.Checked)"> <อินพุต type = "ช่องทำเครื่องหมาย" value = "capitalsName.name" ng-checked = "capitalsName.Checked"/> <span> {{capitalsName.cn}} </span> </li> </ul> </li> <li> <p> โดเมน: </p> <ul> ng-click = "onClick (scopesName.name, scopesName.Checked)"> <อินพุตประเภท = "ช่องทำเครื่องหมาย" value = "scopesName.name" ng-checked = "scopesName.Checked"/> <span> ข้อมูล: </p><ul> <li ng-repeat = "EconomicData ใน category.economicData" ng-click = "onclick (EconomicData.name, EconomicData.Checked)"> <อินพุตประเภท = "ช่องทำเครื่องหมาย" ค่า = "EconomingData.Name" ng-checked = "EconomicData.Checked"/> <span> {{EconomicData.cn}} </span> </li></ul> </li> <li> <p> ข้อมูลธนาคารกลาง: </p> <ul> ng-click = "onclick (centralbank.name, centralbank.checked)"> <อินพุต type = "ช่องทำเครื่องหมาย" value = "centralbank.name" ng-checked = "centralbank.checked"/> <span> {centralbank.cn}} ng-click = "infosref ()"> ยืนยัน </button>การสร้างหน้า:
มันถูกแบ่งออกเป็น 5 รายการหลักทั้งหมดและแท็กการจำแนกประเภทเล็ก ๆ ภายใต้แต่ละรายการหลักจะถูกสร้างขึ้นผ่าน NG-repeat
การวิเคราะห์ความต้องการ: ผู้ใช้คลิกที่แท็กตัวกรองแต่ละตัวเพิ่มชื่อแท็กที่เลือกไปยังอาร์เรย์และส่งอาร์เรย์ไปยังพื้นหลังสำหรับโปรแกรมเมอร์พื้นหลังเพื่อกรอง
รหัส JS:
// การจำแนกข้อมูลตัวกรองข่าว (การจำลอง data) $ scope.category = {ภูมิภาค: [{ชื่อ: "regions_china", cn: "จีน", ตรวจสอบ: false}, {ชื่อ: "regions_unitedstates", cn: "us", ตรวจสอบ: fa lse}, {ชื่อ: "regions_unitedkingdom", cn: "uk", ตรวจสอบ: false}, {ชื่อ: "regions_eurozone", cn: "ยุโรป", ตรวจสอบ: false}, {ชื่อ: "regions_ja pan ", cn:" ญี่ปุ่น ", ตรวจสอบ: false}, {ชื่อ:" regions_canada ", cn:" แคนาดา ", ตรวจสอบ: false}, {ชื่อ:" regions_australia ", cn:" ออสเตรเลีย ", ตรวจสอบ: false}, {ชื่อ:" Regio "Regio" ns_switzerland ", cn:" สวิตเซอร์แลนด์ ", cn:" สวิตเซอร์แลนด์ ", ตรวจสอบ: เท็จ}, {ชื่อ:" regions_others ", cn:" อื่น ๆ ", ตรวจสอบ: false}], เมืองหลวง: [{ชื่อ:" Capitals_foreigne xchange ", cn:" forex ", ตรวจสอบ: false}, {ชื่อ:" capitals_stocks ", cn:" คลัง ", ตรวจสอบ: false}, {ชื่อ:" capitals_c ที่พัก ", cn:" Commodities ", ตรวจสอบ : false}, {ชื่อ: "capitals_bondsbonds", cn: "Brand", ตรวจสอบ: false}], scopes: [{name: "scopes_macroscopic", cn: "โดยรวม", ตรวจสอบ: false}, {ชื่อ: "scopes_in" dustrial ", cn:" อุตสาหกรรม ", ตรวจสอบ: false}, {ชื่อ:" scopes_company ", cn:" บริษัท ", ตรวจสอบ: false}], EconomicData: [{ชื่อ:" EconomicData_yes ", CN:" ข้อมูลเศรษฐกิจ " data ", ตรวจสอบ: false}]}; // เดินทางข้อมูลเพื่อค้นหาวัตถุที่มีชื่อเดียวกันภายใต้ชื่อที่เข้ามา (ใช้เพื่อค้นหาตำแหน่งวัตถุในข้อมูลจำลองที่ผู้ใช้คลิก) var แต่ละรายการ = (ชื่อ) => {ให้หมวดหมู่ = $ scope samename = category [k] [j]; samename.checked = true; return samename}}}}; // วิธีนี้ส่วนใหญ่ได้รับอาร์เรย์ไปยังรายการที่จุดเริ่มต้นและตรวจสอบฉลากที่เลือกเป็นสถานะที่เลือก สำหรับ (var i = 0; i <item.length; i ++) {var samename = แต่ละรายการ (รายการ [i]); // เพราะวิธีทั้งหมดจะถูกดำเนินการสองครั้งเหตุผลยังไม่พบดังนั้นการตัดสินว่าจะเพิ่มซ้ำ if ($ spope.categories.indexof (samename.name) <0) {$ scope.cate.categories.push (samename.name);}}}; init (); // กรองอาร์เรย์การจำแนก (หลังจากผู้ใช้คลิกชื่อแท็กที่ผ่านมา ไม่ได้เลือกเพิ่มลงในอาร์เรย์ที่จะส่งออก) $ scope.onclick = (filterItem, ตรวจสอบ) => {var samename = odlist (filterItem); ถ้า (! ตรวจสอบ) {samename.Checked = true; i = 0; i <$ scope.categories.length; i ++) {ถ้า ($ scope.cope.categories [i] === FilterItem) {$ scope.cope.splice.splice (i, 1);}}}}; // ยืนยันปุ่ม $ scope.infosref = () () {$ spope.oncategoryChange (); $ scope.modal.hide ();}; // ล้าง $ scope.cope.clean = () => {ให้ che = $ ("อินพุต: ตรวจสอบ"); // สิ่งนี้ไม่สามารถล้างได้โดยการกำหนดค่าให้ [] และภายนอกได้รับการคัดลอกและอ้างอิง $ scope.categories.length = 0; che.each (ฟังก์ชั่น (k, filterinput) {filterinput.checked = false;}); $ scope.infosref ();}}ด้านบนเป็นฟังก์ชั่นเล็ก ๆ ของแท็กการกรองหน้า AngularJS ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!