我有一些选项卡显示从 JSON 数据中提取的目录。选项卡有效，我对表格列进行了排序。到目前为止一切都很好。但是，我想实现两件事：
- 我想在页面加载时默认显示第一个选项卡面板。
- 我想在活动标签链接中添加一类“活动”。
我的代码可以在这个小提琴中看到：http: //jsfiddle.net/9hZx5/5/，也如下：
HTML：
<div ng-app="myApp">
<div class="tabs">
<a href="" title="" class="tab selected" rel="tab1" ng:click="selected=1">Purchases</a>
<a href="" title="" class="tab" rel="tab2" ng:click="selected=2">Products on sale</a>
<a href="" title="" class="tab" rel="tab3" ng:click="selected=3">Last 30 days sales</a>
</div>
<div id="tab1" class="tabContent selected" ng-controller="PurchasesCtrl" ng:show="selected == 1">
<h2>Purchases:</h2>
<table cellspacing="0">
<tr class="first">
<th class="first">Date</th>
<th>Description</th>
</tr>
<tr ng-repeat="purchase in purchases.data" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'last':$last}">
<td class="first">{{purchase.date}}</td>
<td>{{purchase.text}}</td>
</tr>
</table>
</div>
<div id="tab2" class="tabContent selected" ng-controller="SaleProductsCtrl" ng:show="selected == 2">
<h2>Sale products:</h2>
<table cellspacing="0">
<tr class="first">
<th class="first">Date</th>
<th>Description</th>
</tr>
<tr ng-repeat="saleProduct in saleProducts.data" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'last':$last}">
<td class="first">{{saleProduct.date}}</td>
<td>{{saleProduct.text}}</td>
</tr>
</table>
</div>
<div id="tab3" class="tabContent selected" ng-controller="Sale30DaysCtrl" ng:show="selected == 3">
<h2>Sale 30 days:</h2>
<table cellspacing="0">
<tr class="first">
<th class="first">Date</th>
<th>Description</th>
</tr>
<tr ng-repeat="sale30Day in sale30Days.data" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'last':$last}">
<td class="first">{{sale30Day.date}}</td>
<td>{{sale30Day.text}}</td>
</tr>
</table>
</div>
</div>
JS：
var myApp = angular.module("myApp",[]);
myApp.factory("Purchases", function(){
var Purchases = {};
Purchases.data = [
{
date: "20/05/2012",
text: "Lorem ipsum dolor sit amet ipsum dolor"
},
{
date: "20/05/2012",
text: "Lorem ipsum dolor sit amet ipsum dolor"
},
{
date: "20/05/2012",
text: "Lorem ipsum dolor sit amet ipsum dolor"
}
];
return Purchases;
});
function PurchasesCtrl($scope, Purchases){
$scope.purchases = Purchases;
}
myApp.factory("SaleProducts", function(){
var SaleProducts = {};
SaleProducts.data = [
{
date: "20/05/2012",
text: "Lorem ipsum dolor sit amet ipsum dolor"
},
{
date: "20/05/2012",
text: "Lorem ipsum dolor sit amet ipsum dolor"
}
];
return SaleProducts;
});
function SaleProductsCtrl($scope, SaleProducts){
$scope.saleProducts = SaleProducts;
}
myApp.factory("Sale30Days", function(){
var Sale30Days = {};
Sale30Days.data = [
{
date: "20/05/2012",
text: "Lorem ipsum dolor sit amet ipsum dolor"
},
{
date: "20/05/2012",
text: "Lorem ipsum dolor sit amet ipsum dolor"
},
{
date: "20/05/2012",
text: "Lorem ipsum dolor sit amet ipsum dolor"
},
{
date: "20/05/2012",
text: "Lorem ipsum dolor sit amet ipsum dolor"
}
];
return Sale30Days;
});
function Sale30DaysCtrl($scope, Sale30Days){
$scope.sale30Days = Sale30Days;
}
我不确定我是否需要为选项卡链接定义一个控制器（尝试过，它似乎完全打破了选项卡！），或者我是否在为每个选项卡面板都有一个控制器时稍微错误地处理了这个问题，我整个部分应该只有一个主控制器。
任何帮助都将不胜感激，因为我完全是 Angular 的新手，并试图找到解决方法。
谢谢各位...