Angular-1.1.2. tab页

最新推荐文章于 2025-08-13 21:05:35 发布

转载最新推荐文章于 2025-08-13 21:05:35 发布 · 213 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/alan-alan/p/7402934.html

文章标签：

本文介绍了一个使用AngularJS实现的Tab页面切换功能。通过ng-repeat指令动态生成Tab选项，并利用$scope.slectIndex来跟踪当前选中的Tab。点击不同的Tab会触发queryOrder函数，更新显示的数据集。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1.2tab页展示

知识点：

理论上 $index 是由 ng-repeat 创建的一个 “模板变量(template variable)”。

这只在 repeat 块里面有意义(并正确起作用)。当我们将它的值传递到外面时,它就失去了上下文从而不再有效。

功能	代码参考
VM	<!-- $scope.tab =[全部，待发货，待收货，已完成] --> <ul class="row bg_fff" id="order_tab"> <li class="item col-25 " ng-repeat="item in tab" ng-click="queryOrder($index)"> <span ng-class="slectIndex==$index ? 'active' : ''">{{item}}</span> </li> </ul>
M	$scope.items=[];//显示 $scope.items0 =[];//全部 $scope.items1 =[];//待发货 $scope.items2 =[];//待收货 $scope.items3 =[];//已完成，可再去消费 $scope.queryOrder = function (index){ var type = $scope.slectIndex = index; console.log($scope.slectIndex); queryOrderByIndex(index,"0",$scope.items0); queryOrderByIndex(index,"1",$scope.items1); queryOrderByIndex(index,"2",$scope.items2); queryOrderByIndex(index,"3",$scope.items3) }
factory	.factory('commonfn',function($state,$ionicHistory,$ionicScrollDelegate, $cordovaToast,$rootScope,$ionicPopup){ // commonfn.init($scope) return{ init: function($scope){ //点击tab 查询订单 $scope.noData1 = function (arr){ if(arr.length>0){$scope.noData = false;} else{ $scope.noData = true; $scope.loadingMore = false; } } $scope.queryOrderByIndex = function (index,str,arr){ if(index == str){ $scope.slectIndex = index; $scope.items = arr; noData1($scope.items); } } }, } })