我正在尝试学习 AngularJ，但不确定创建通过数据绑定填充的选项卡式窗格的正确方法。
具体来说，我拥有的是三个 HTML 表，它们从 3 个不同的 JSON 文件中提取数据。显示此内容的代码效果很好：
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"
}
];
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"
}
];
return Sale30Days;
});
function Sale30DaysCtrl($scope, Sale30Days){
$scope.sale30Days = Sale30Days;
}
HTML：
<div ng-app="myApp">
<div class="tabs">
<a href="" title="" class="tab selected" rel="tab1">Tab 1</a>
<a href="" title="" class="tab" rel="tab2">Tab 2</a>
<a href="" title="" class="tab" rel="tab3">Tab 3</a>
</div>
<div id="tab1" class="tabContent selected" ng-controller="PurchasesCtrl">
<h2>Tab content 1:</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">
<h2>Tab content 2:</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">
<h2>Tab content 3:</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>
这里有一个小提琴：http: //jsfiddle.net/9hZx5/2/。
现在我不确定的部分是如何在页面加载时隐藏第二个和第三个选项卡，然后使用顶部的链接在选项卡式内容窗格之间切换。使用 jQuery 来做到这一点 (a) 没有用，而且 (b) 似乎非常错误，因为我想以“Angular”的方式来做。
我已经尝试按照这个小提琴http://jsfiddle.net/vojtajina/vM4FY/将 'ng:click' 和 'ng:show' 添加到链接和面板中，但我无法让它工作。我在此找到的教程/示例（例如 Angular Bootstrap 选项卡指令http://angular-ui.github.io/bootstrap/）似乎都通过转发器动态生成选项卡，这增加了很多复杂性我的情景。
我想知道是否有人能指出我正确的方向？
非常感谢各位。