AngularJS 簡介
AngularJS 是一個JavaScript 框架。它可通過<script> 標籤添加到HTML 頁面。
AngularJS 通過指令擴展了HTML，且通過表達式綁定數據到HTML。
AngularJS 是一個JavaScript 框架
AngularJS 是一個JavaScript 框架。它是一個以JavaScript 編寫的庫。
AngularJS 是以一個JavaScript 文件形式發布的，可通過script 標籤添加到網頁中：
<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()">清空</button></div><ion-content scroll="false"><ul><li><p>國家地區:</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>領域:</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>經濟資料:</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>中央銀行數據:</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 ng-click="infosRef()">確認</button>頁面構建：
總共分為5個大項，通過ng-repeat生成每個大項下的小分類標籤。
需求分析：用戶點擊每一個篩選標籤，將其所選的標籤名稱加入一個數組中，並將該數組發送到後台供後台程序員篩選。
js代碼：
//新聞篩選數據分類（模擬數據）$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:"工業",checked:false},{name:"Scopes_Company",cn:"公司",checked:false}],EconomicData:[{name:"EconomicData_Yes",cn:"經濟資料",checked:false}],CentralBank:[{name:"CentralBank_Yes",cn:"中央銀行數據",checked:false}]};//遍歷數據查找傳入name下同名的對象（用來找出用戶點擊的那個在模擬數據中的對象位置）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}}}};//該方法主要是在頁面一開始會接收一個數組給Item，通過遍歷這個數組和模擬數據來勾選一開始就為選中狀態的標籤let init=()=>{let Item=appSettings.filterInfosCategories;for(var i=0;i<Item.length;i++){var sameName=EachList(Item[i]);//因為整個方法會執行兩遍，暫未找出原因，所以加入是否重複的判斷if($scope.categories.indexOf(sameName.name)<0){$scope.categories.push(sameName.name);}}};init();//篩選分類數組（用戶點擊標籤後，傳入點擊的標籤名稱和是否在選中狀態，如果在就將要傳出數組中的同名標籤名稱移除，如果沒選中就加入這個要傳出的數組中）$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);}}}};//確認按鈕$scope.infosRef = () => {$scope.onCategoryChange();$scope.modal.hide();};//清空$scope.clean=() => {let che=$("input:checked");//這裡不能通過賦值為[]來清除，外面已經被複製引用。 $scope.categories.length=0;che.each(function(k,filterInput){filterInput.checked=false;});$scope.infosRef();}}以上所述是小編給大家介紹的AngularJs頁面篩選標籤小功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！