Pendahuluan AngularJS
AngularJS adalah kerangka kerja JavaScript. Ini dapat ditambahkan ke halaman HTML melalui tag <script>.
AngularJS memperluas HTML melalui arahan dan mengikat data ke HTML melalui ekspresi.
AngularJS adalah kerangka kerja JavaScript
AngularJS adalah kerangka kerja JavaScript. Ini adalah perpustakaan yang ditulis dalam JavaScript.
AngularJS diterbitkan sebagai file JavaScript dan dapat ditambahkan ke halaman web melalui tag skrip:
<skrip src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script>
Berikut ini semua untuk pengenalan fungsi tag pemfilteran halaman AngularJS dalam artikel ini. Silakan lihat pengantar berikut untuk konten kunci:
Halaman html:
<div> <div> Kategori Berita </div> <tombol ng-click = "clean ()"> CLEAR </button> </div> <ion-content scroll = "false"> <ul> <li> <p> Negara dan wilayah: </p> <ul> <li ng-repeat = "RegionsName di Kategori.Regions" NG-klik = "OnClick (regionName.name, regionName.Checked)"> <input type = "centang kotak" value = "regionName.name" ng-checked = "regionName.Checked"/> <span> {{regionName.cn}} </span> </li> </ul> </li> <li> <p> Capitals: </p> <ul> <lig-repeat = "CapitalSname di Kategori.capitals" NG-klik = "OnClick (CapitalSname.Name, CapitalsName.Checked)"> <input type = "centang kotak" value = "capitalsname.name" ng-checked = "capitalsname.checked"/> <span> {{capitalsname.cn}} </span> </li> </ul> </li> <li> <p> Domain: </p> <ul> <li ng-repeat = "scopesName di kategori.copes" ng-click="onClick(ScopesName.name,ScopesName.checked)"><input type="checkbox" value="ScopesName.name" ng-checked="ScopesName.checked"/><span>{{ScopesName.cn}}</span></li></li></li><li><p>Economic Informasi: </p> <ul> <li ng-repeat = "EconomicData dalam kategori.economicdata" ng-click = "onClick (EconomicData.Name, EconomicData.Checked)"> <input type = "centang kotak" value = "EconomicData.name" ng-checked = "EconomicData.Checked"/> <span> {{EconomicData.cn}} </span> </li> </ul> </li> <li> <p> Data Bank Sentral: </p> <ul> <lig-repeat = "CentralBank di dalam kategori.constralBank" NG-klik = "OnClick (CentralBank.Name, CentralBank.Checked)"> <input type = "centang kotak" value = "centralbank.name" ng-checked = "centralbank.checked"/> <span> {{centralbank.cn}} </span> </li> </ul> </ul> Li> </ul> </span> </san> </li> </ul> NG-klik = "infosref ()"> konfirmasi </button>Bangunan halaman:
Ini dibagi menjadi 5 item utama secara total, dan tag klasifikasi kecil di bawah setiap item utama dihasilkan melalui NG-repeat.
Analisis Persyaratan: Pengguna mengklik pada setiap tag filter, menambahkan nama tag yang dipilih ke array, dan mengirimkan array ke latar belakang untuk pemrogram latar belakang untuk memfilter.
Kode JS:
// Klasifikasi Data Filter Berita (Simulasi Data) $ scope.category = {region: [{name: "regions_china", cn: "cina", checked: false}, {name: "regions_unitedStates", cn: "us", checked: fa lse}, {name: "regions_unitedkingdom", cn: "uk", checked: false}, {name: "region_eurozone", cn: "Eropa", diperiksa: false}, {name: "region_ja Pan ", cn:" Jepang ", diperiksa: false}, {name:" region_canada ", cn:" canada ", checked: false}, {name:" regions_australia ", cn:" australia ", diperiksa: false}, {name:" regio ns_switzerland ", cn:" swiss ", cn:" swiss ", diperiksa: false}, {name:" region_others ", cn:" orang lain ", diperiksa: false}], ibukota: [{name:" Capitals_foreigne xchange ", cn:" forex ", checked: false}, {name:" capitals_stocks ", cn:" treasury ", checked: false}, {name:" capitals_commodities ", cn:" komoditas ", diperiksa : false}, {name: "capitals_bondsbonds", cn: "brand", checked: false}], scopes: [{name: "scopes_macroscopic", cn: "keseluruhan", diperiksa: false}, {name: "scopes_in dustrial ", cn:" industri ", diperiksa: false}, {name:" scopes_company ", cn:" company ", checked: false}], EconomicData: [{name:" EconomicData_yes ", cn:" Data Ekonomi ", Centang: False}], CentralBank: {{Name," Centralb ", Centrales", False: False}], CentralBank: {{{{"BB:" CENTRALE ", COMPERS", FALSE: FALSE}], CENTRALBANK: {{{{"BB:" CENTERBED ", FALSE: FALSE: COLTB: {{{BB: {{BB: {{BB: {{BB: {{BB:" Data ", diperiksa: false}]}; // bepergian data untuk menemukan objek dengan nama yang sama di bawah nama yang masuk (digunakan untuk mengetahui lokasi objek dalam data yang disimulasikan yang diklik pengguna) var masing -masing (name) => {let Category = $ scope.category; untuk (var k dalam kategori) {for (var v in category. Samename = Kategori [k] [j]; samename.checked = true; return samename}}}}; // Metode ini terutama menerima array ke item di awal, dan memeriksa label yang dipilih sebagai status yang dipilih dengan melintasi array dan simulasi data pada awal let init = () = {let item = untuk (var i = 0; i <item.length; i ++) {var samename = masing -masing (item [i]); // karena seluruh metode akan dieksekusi dua kali, alasannya belum ditemukan, jadi penilaian apakah akan ditambahkan secara berulang secara berulang if($scope.categories.indexOf(sameName.name)<0){$scope.categories.push(sameName.name);}}};init();//Filter the classification array (after the user clicks the tag, the tag name passed in and whether it is in the selected state. If it is in, the tag name of the same name in the array to be passed out is removed. If it is not dipilih, tambahkan ke array yang akan pingsan) $ scope.onClick = (filterItem, check) => {var samename = everlist (filterItem); if (! centang) {samename.checked = true; $ scope.categories.push (filteritem);} else {samename.Checked = fales = foers. i = 0; i <$ scope.categories.length; i ++) {if ($ scope.categories [i] === filterItem) {$ scope.categories.splice (i, 1);}}}; // konfirmasi tombol $ scope.infosref = () => {$ scope.oncategoryChange (); $ scope.modal.hide ();}; // hapus $ scope.clean = () => {let che = $ ("input: checked"); // Ini tidak dapat dihapus dengan menetapkan nilai untuk [], dan bagian luar telah disalin dan dirujuk. $ scope.categories.length = 0; che.each (function (k, filterInput) {filterInput.checked = false;}); $ scope.infosref ();}}Di atas adalah fungsi kecil tag pemfilteran halaman AngularJS yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!