AngularJs頁面篩選標(biāo)簽小功能
AngularJS 簡(jiǎn)介
AngularJS 是一個(gè) JavaScript 框架。它可通過 <script> 標(biāo)簽添加到 HTML 頁面。
AngularJS 通過 指令 擴(kuò)展了 HTML,且通過 表達(dá)式 綁定數(shù)據(jù)到 HTML。
AngularJS 是一個(gè) JavaScript 框架
AngularJS 是一個(gè) JavaScript 框架。它是一個(gè)以 JavaScript 編寫的庫。
AngularJS 是以一個(gè) JavaScript 文件形式發(fā)布的,可通過 script 標(biāo)簽添加到網(wǎng)頁中:
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
下面都是為本文介紹angularjs頁面篩選標(biāo)簽功能做鋪墊的,重點(diǎn)內(nèi)容請(qǐng)看下面介紹:
頁面html:
<div class="bar bar-calm bar-header"> <div class="title">新聞分類</div> <button class="button button-balanced cleanbtn" ng-click="clean()">清空</button> </div> <ion-content class="content" scroll="false"> <ul class="filter-item"> <li> <p>國家地區(qū):</p> <ul> <li ng-repeat="RegionsName in category.Regions" ng-click="onClick(RegionsName.name,RegionsName.checked)"> <input type="checkbox" value="RegionsName.name" ng-checked="RegionsName.checked"/> <span>{{RegionsName.cn}}</span> </li> </ul> </li> <li> <p>資本:</p> <ul> <li ng-repeat="CapitalsName in category.Capitals" ng-click="onClick(CapitalsName.name,CapitalsName.checked)"> <input type="checkbox" value="CapitalsName.name" ng-checked="CapitalsName.checked"/> <span>{{CapitalsName.cn}}</span> </li> </ul> </li> <li> <p>領(lǐng)域:</p> <ul> <li ng-repeat="ScopesName in category.Scopes" ng-click="onClick(ScopesName.name,ScopesName.checked)"> <input type="checkbox" value="ScopesName.name" ng-checked="ScopesName.checked"/> <span>{{ScopesName.cn}}</span> </li> </ul> </li> <li> <p>經(jīng)濟(jì)資料:</p> <ul> <li ng-repeat="EconomicData in category.EconomicData" ng-click="onClick(EconomicData.name,EconomicData.checked)"> <input type="checkbox" value="EconomicData.name" ng-checked="EconomicData.checked"/> <span>{{EconomicData.cn}}</span> </li> </ul> </li> <li> <p>中央銀行數(shù)據(jù):</p> <ul> <li ng-repeat="CentralBank in category.CentralBank" ng-click="onClick(CentralBank.name,CentralBank.checked)"> <input type="checkbox" value="CentralBank.name" ng-checked="CentralBank.checked"/> <span>{{CentralBank.cn}}</span> </li> </ul> </li> </ul> <button class="button button-calm confirmbtn" ng-click="infosRef()">確認(rèn)</button>
頁面構(gòu)建:
總共分為5個(gè)大項(xiàng),通過ng-repeat生成每個(gè)大項(xiàng)下的小分類標(biāo)簽。
需求分析:用戶點(diǎn)擊每一個(gè)篩選標(biāo)簽,將其所選的標(biāo)簽名稱加入一個(gè)數(shù)組中,并將該數(shù)組發(fā)送到后臺(tái)供后臺(tái)程序員篩選。
js代碼:
//新聞篩選數(shù)據(jù)分類(模擬數(shù)據(jù)) $scope.category={ Regions:[{name:"Regions_China",cn:"中國",checked:false},{name:"Regions_UnitedStates",cn:"美國",checked:false},{name:"Regions_UnitedKingdom",cn:"英國",checked:false},{name:"Regions_Eurozone",cn:"歐洲",checked:false},{name:"Regions_Japan",cn:"日本",checked:false},{name:"Regions_Canada",cn:"加拿大",checked:false},{name:"Regions_Australia",cn:"澳大利亞",checked:false},{name:"Regions_Switzerland",cn:"瑞士",checked:false},{name:"Regions_Others",cn:"其他",checked:false}], Capitals:[{name:"Capitals_ForeignExchange",cn:"外匯",checked:false},{name:"Capitals_Stocks",cn:"公債",checked:false},{name:"Capitals_Commodities",cn:"商品",checked:false},{name:"Capitals_BondsBonds",cn:"品牌",checked:false}], Scopes:[{name:"Scopes_Macroscopic",cn:"整體",checked:false},{name:"Scopes_Industrial",cn:"工業(yè)",checked:false},{name:"Scopes_Company",cn:"公司",checked:false}], EconomicData:[{name:"EconomicData_Yes",cn:"經(jīng)濟(jì)資料",checked:false}], CentralBank:[{name:"CentralBank_Yes",cn:"中央銀行數(shù)據(jù)",checked:false}] }; //遍歷數(shù)據(jù)查找傳入name下同名的對(duì)象(用來找出用戶點(diǎn)擊的那個(gè)在模擬數(shù)據(jù)中的對(duì)象位置) var EachList=(name)=>{ let category=$scope.category; for( var k in category){ for(var j in category[k]){ if(category[k][j].name==name){ var sameName=category[k][j]; sameName.checked=true; return sameName } } } }; //該方法主要是在頁面一開始會(huì)接收一個(gè)數(shù)組給Item,通過遍歷這個(gè)數(shù)組和模擬數(shù)據(jù)來勾選一開始就為選中狀態(tài)的標(biāo)簽 let init=()=>{ let Item=appSettings.filterInfosCategories; for(var i=0;i<Item.length;i++){ var sameName=EachList(Item[i]); //因?yàn)檎麄€(gè)方法會(huì)執(zhí)行兩遍,暫未找出原因,所以加入是否重復(fù)的判斷 if($scope.categories.indexOf(sameName.name)<0){ $scope.categories.push(sameName.name); } } }; init(); //篩選分類數(shù)組(用戶點(diǎn)擊標(biāo)簽后,傳入點(diǎn)擊的標(biāo)簽名稱和是否在選中狀態(tài),如果在就將要傳出數(shù)組中的同名標(biāo)簽名稱移除,如果沒選中就加入 這個(gè)要傳出的數(shù)組中) $scope.onClick=(filterItem,check)=>{ var sameName=EachList(filterItem); if(!check){ sameName.checked=true; $scope.categories.push(filterItem); }else{ sameName.checked=false; for(var i=0;i<$scope.categories.length;i++){ if($scope.categories[i]===filterItem){ $scope.categories.splice(i,1); } } } }; //確認(rèn)按鈕 $scope.infosRef = () => { $scope.onCategoryChange(); $scope.modal.hide(); }; //清空 $scope.clean=() => { let che=$("input:checked"); //這里不能通過賦值為[]來清除,外面已經(jīng)被復(fù)制引用。 $scope.categories.length=0; che.each(function(k,filterInput){ filterInput.checked=false; }); $scope.infosRef(); } }
以上所述是小編給大家介紹的AngularJs頁面篩選標(biāo)簽小功能 ,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Angular 與 Component store實(shí)踐示例
這篇文章主要為大家介紹了Angular 與 Component store實(shí)踐示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02解決angular雙向綁定無效果,ng-model不能正常顯示的問題
今天小編就為大家分享一篇解決angular雙向綁定無效果,ng-model不能正常顯示的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10Angular.js實(shí)現(xiàn)注冊(cè)系統(tǒng)的實(shí)例詳解
Angular.js是Google開發(fā)的前端技術(shù)框架,最近一直在學(xué)習(xí)Angular.js,通過對(duì)angular.js的簡(jiǎn)單理解后發(fā)現(xiàn),angular.js通過一些簡(jiǎn)單的指令即可實(shí)現(xiàn)對(duì)DOM元素的操作,其特色為雙向數(shù)據(jù)綁定,下面這篇文章給大家詳細(xì)介紹Angular.js實(shí)現(xiàn)注冊(cè)系統(tǒng)的方法,一起來看看吧。2016-12-12AngularJS入門(用ng-repeat指令實(shí)現(xiàn)循環(huán)輸出
這篇文章主要介紹了AngularJS入門(用ng-repeat指令實(shí)現(xiàn)循環(huán)輸出,需要的朋友可以參考下2016-05-05AngularJS 與Bootstrap實(shí)現(xiàn)表格分頁實(shí)例代碼
這篇文章主要介紹了AngularJS 與Bootstrap實(shí)現(xiàn)表格分頁的相關(guān)資料,并附實(shí)例代碼和實(shí)現(xiàn)效果圖,需要的朋友可以參考下2016-10-10小談angular ng deploy的實(shí)現(xiàn)
這篇文章主要介紹了小談angular ng deploy的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04