Question

我正在尝试使用AngularJS创建制表符。 2个静态选项卡仅作为测试pourpose，其思路是拥有一个对象列表并动态创建选项卡。代码如下：

HTML：

<body ng-controller="Ctrl" ng-app="app" style="background-color: #f4f4f4">
  <table class="tabs-container" border="0" cellspacing="0" cellpadding="0" style="border-collapse: separate" ng-init="sss = '0'">
    <tr>
      <td class="tab" ng-click="sss = '0'" ng-class="{'sub-tab-active': sss  === '0'}">Test</td>
      <td class="tab" ng-click="sss = '00'" ng-class="{'sub-tab-active': sss  === '00'}">Test 00</td>
      <td class="tab" ng-click="sss = '000'" ng-class="{'sub-tab-active': sss  === '000'}">Test 000</td>
      <td class="tab" ng-repeat="b in beteiligungen" ng-click="sss = b.Key" ng-class="{'sub-tab-active': sss  === b.Key}">Test {{b.Key}}</td>
    </tr>
  </table>
  <div class="container-full-border container-padding">
    <div ng-show="sss  === '0'">Test 0</div>
    <div ng-show="sss  === '00'">Test 00</div>
    <div ng-show="sss  === '000'">Test 000</div>
    <div ng-show="sss  === '0000'">Test 0000</div>
    <div ng-show="sss  === '00000'">Test 00000</div>
  </div>
</body>

JS：

angular.module('app', []).controller('Ctrl', ['$scope', '$http', function ($scope, $http) {
  $scope.beteiligungen = [{
    Key: "0000",
    Value: "Test1"

  }, {
    Key: "00000",
    Value: "Test2"
  }]
}]);

也在plnkr

我不明白为什么要设置课程sub-tab-active，但在点击其他标签后不会取消设置。

为什么静态标签工作而动态标签不起作用？

Answer 1

将ng-click="sss = b.Key"更改为ng-click="$parent.sss = b.Key"。

指令ng-repeat创建一个新的子范围。

Answer 2

ngRepeat正在为每个项目创建一个单独的范围。

https://docs.angularjs.org/api/ng/directive/ngRepeat

关于AngularJs和ngRepeat的问题

2 个答案: