Javascript 在选项卡集上使用AngularJS模型

我有一个带有两个选项的选项卡集，其中我使用angular绑定JSON文件中的数据，我想要的是在控制台中记录我正在单击的选项卡的名称，所以我想使用“模型”，但我不知道这是否正确

这是我的标签

<tabset>
  <tab heading="tab1">
    <div class="panenl-body">
        content
    </div>
  </tab>

   <tab heading="tab2">
    <div class="panenl-body">
        content
    </div>
  </tab>
</tabset>

内容
内容

我见过这样的情况：

<div class="radio radio-text" ng-init="topTable.value='topCategory'">
    <label class="radio-inline"><input type="radio" ng-model="topTable.value" value="topCategory" ng-change="updateTotals(topTable.value)">TY Top 30 Categories</label>
    <label class="radio-inline"><input type="radio" ng-model="topTable.value" value="topSupplier" ng-change="updateTotals(topTable.value)">TY Top 10 Suppliers</label>
    <label class="radio-inline"><input type="radio" ng-model="topTable.value" value="topBrand" ng-change="updateTotals(topTable.value)">TY Top 10 Brands</label>
</div>

TY前30名类别
TY十大供应商
TY十大品牌

---

因此，当你点击单选按钮时，你可以做一些事情，这与我想做的类似，但使用选项卡集。

我不太确定你想要什么，但当然，你可以使用选项卡集做类似的事情：

<tabset>
  <tab heading="tab1" ng-click="tabClicked('This is name 1')">
    <div class="panenl-body">
      content
    </div>
  </tab>

  <tab heading="tab2" ng-click="tabClicked('This is name 2')">
    <div class="panenl-body">
      content
    </div>
  </tab>
</tabset>

---

我不太确定您想要什么，但您当然可以使用选项卡集执行类似操作：

<tabset>
  <tab heading="tab1" ng-click="tabClicked('This is name 1')">
    <div class="panenl-body">
      content
    </div>
  </tab>

  <tab heading="tab2" ng-click="tabClicked('This is name 2')">
    <div class="panenl-body">
      content
    </div>
  </tab>
</tabset>

---

我不确定“tabset”指令是在哪里定义的，但是假设您可以访问该指令定义：

app.directive('tab', function() {
   return {
       restrict : 'E',
       link : function(scope, element, attrs) {
           element.on('click', function() {
               console.log('This is tab: ', attrs.heading);
           }
       }

   }
});

在您的HTML中：

<tabset>
  <tab heading="tab1">
    <div class="panenl-body">
      content
    </div>
  </tab>

  <tab heading="tab2">
    <div class="panenl-body">
      content
    </div>
  </tab>
</tabset>

内容
内容

---

通过这种方式，我们没有使用

ng click

，因为您没有更新任何作用域或控制器对象，所以不需要使用

ng click
触发摘要循环。我不确定“tabset”指令是在哪里定义的，但是假设您可以访问指令定义：

app.directive('tab', function() {
   return {
       restrict : 'E',
       link : function(scope, element, attrs) {
           element.on('click', function() {
               console.log('This is tab: ', attrs.heading);
           }
       }

   }
});

在您的HTML中：

<tabset>
  <tab heading="tab1">
    <div class="panenl-body">
      content
    </div>
  </tab>

  <tab heading="tab2">
    <div class="panenl-body">
      content
    </div>
  </tab>
</tabset>


内容
内容

这样我们就不用使用
ng click
，因为您没有更新任何作用域或控制器对象，所以不需要使用
ng click
触发摘要循环。选项卡集中的值是否固定，或者您是否有一个数组或某个名称或其他名称的来源？您使用的是
ng repeat
？选项卡集中的值是否固定，或者您是否有一个数组或某个名称或名称来源的东西？你正在使用ng repeat吗？谢谢你的时间=）是的，没问题：）谢谢你的时间=）是的，没问题：）