使用AngularJS选择时更改选项卡链接上的类

我有一些选项卡，显示从JSON数据中提取的内容表。选项卡工作，我对表列进行排序。到目前为止一切都很好。然而，我想实现两件事：

我希望在加载页面时默认显示第一个选项卡面板。 我想在活动选项卡链接中添加一个“活动”类。 我的代码可以在这把小提琴中看到：，也如下所示：

HTML:

我不确定是否需要为选项卡链接定义一个控制器。我尝试过，但它似乎完全破坏了选项卡链接！，或者我是否在每个选项卡面板上都有一个控制器，而我应该在整个部分都有一个主控制器，这有点错误

任何帮助都将不胜感激，因为我是一个全新的角度，并试图找到我的方法

谢谢大家

<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 class="tabs" ng-init="selected=1">
            <a href="" title="" class="tab selected" rel="tab1" ng:click="selected=1" ng:class="{'active' : selected==1 }">Purchases</a>
            <a href="" title="" class="tab" rel="tab2" ng:click="selected=2" ng:class="{'active' : selected==2 }">Products on sale</a>
            <a href="" title="" class="tab" rel="tab3" ng:click="selected=3" ng:class="{'active' : selected==3 }">Last 30 days sales</a>
        </div>

看这里

替换为：

   <div class="tabs" ng-init="selected=1">
            <a href="" title="" class="tab selected" rel="tab1" ng:click="selected=1" ng:class="{'active' : selected==1 }">Purchases</a>
            <a href="" title="" class="tab" rel="tab2" ng:click="selected=2" ng:class="{'active' : selected==2 }">Products on sale</a>
            <a href="" title="" class="tab" rel="tab3" ng:click="selected=3" ng:class="{'active' : selected==3 }">Last 30 days sales</a>
        </div>

---

看这里

太好了，谢谢你，尼蒂什。这就解决了问题的第二部分。您知道如何在加载页面时使第一个显示的项目和第一个选项卡在默认情况下处于活动状态吗？如果我将“活动”类硬编码到第一个选项卡中，它会工作，但是当我单击第二个选项卡时它不会被删除，所以我认为这不是实现的方法。太棒了！谢谢ng init很有趣。你教会了我很多，谢谢。太好了，谢谢你。这就解决了问题的第二部分。您知道如何在加载页面时使第一个显示的项目和第一个选项卡在默认情况下处于活动状态吗？如果我将“活动”类硬编码到第一个选项卡中，它会工作，但是当我单击第二个选项卡时它不会被删除，所以我认为这不是实现的方法。太棒了！谢谢ng init很有趣。你教会了我很多，谢谢。

   <div class="tabs" ng-init="selected=1">
            <a href="" title="" class="tab selected" rel="tab1" ng:click="selected=1" ng:class="{'active' : selected==1 }">Purchases</a>
            <a href="" title="" class="tab" rel="tab2" ng:click="selected=2" ng:class="{'active' : selected==2 }">Products on sale</a>
            <a href="" title="" class="tab" rel="tab3" ng:click="selected=3" ng:class="{'active' : selected==3 }">Last 30 days sales</a>
        </div>