在tabset上使用AngularJS模型

时间:2016-05-26 06:24:16

标签: javascript angularjs

我有一个带有两个选项的tabset,我使用angular绑定来自JSON文件的数据,我想要的是在我的控制台中 log 我单击的选项卡的名称,所以我在考虑使用"模型"但我不知道这是否正确。

这是我的标签

<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>

所以当你点击一个单选按钮时,你可以做一些事情,类似于我想做的事情,但是使用了tabset。

2 个答案:

答案 0 :(得分:2)

我不确定'tabset'指令的定义位置,但假设您可以访问指令定义:

d1 = matrix(ZZ,4,2, [-1,1, 1,-1, -1,1, 1,-1]).transpose()
d2 = matrix(ZZ,4,3, [1,1,-1, 1,-1,-1, 1,-1,1, 1,1,1])
(d1.right_kernel() / (d2.column_space())).invariants()
# OUTPUT: (2, 2)

ChainComplex([d2, d1]).homology()[1]
# OUTPUT: C2 x C2

并在您的HTML中:

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

   }
});

这样我们就不会使用<tabset> <tab heading="tab1"> <div class="panenl-body"> content </div> </tab> <tab heading="tab2"> <div class="panenl-body"> content </div> </tab> </tabset> ,因为您没有更新任何范围或控制器对象,因此无需使用ng-click触发摘要周期。

答案 1 :(得分:1)

我不太确定你想要什么,但当然你可以用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>

在你的控制器中:

$scope.tabClicked = function(value) {
  console.log(value);
};