javascript - 使用 ng-repeat、ng-click 和 $scope

Question

我正在尝试设置一个选项卡式导航栏，它根据单击的选项卡在 div 中显示内容。我像这样在我的 HTML 中使用 ng-repeat:

HTML:

<ul class ="sidebar-nav">
  <li ng-repeat="category in categories" ng-click="category.method()">{{category.name}}</li>
</ul>

但是，它并没有在单击时调用方法将其设置为事件选项卡，而是我看到在页面加载时列出了所有选项卡，并且事件选项卡在单击时不会更改。这是我的 Angular :

$scope.setTab = function(activateTab) {
  $scope.tab = activateTab;
  console.log(activateTab);
}; 

$scope.categories = [
  {
  "name" : "Common Tools",
  method : $scope.setTab(1)
  },
...

我尝试使用匿名函数设置选项卡，并在各个类别中使用“id”编号，但我得到了相同的行为。有什么建议吗？

Answer 1

将您的代码更新为:

$scope.setTab = function(activateTab) {
  $scope.tab = activateTab;
}; 

$scope.categories =[{"name":"Common Tools"}];

在您的 HTML 中:

<ul class ="sidebar-nav">
  <li ng-repeat="category in categories" 
      ng-click="setTab(category)" 
      ng-class="{active: tab == category}">{{category.name}}</li>
</ul>

然后您可以为选项卡的 .active 类设置样式。