AngularJs 和 ngRepeat 上的问题

Question

我正在尝试使用 AngularJS 创建制表符。 2个静态选项卡仅作为测试目的，其想法是拥有一个对象列表并动态创建选项卡。这里的代码：

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

我不明白为什么 class 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 上的问题

Issue on AngularJs and ngRepeat

javascript

dynamic

angularjs

angularjs-ng-repeat