Question

我正在尝试设置一个标签式导航栏，根据点击的标签显示div中的内容。我在我的HTML中使用ng-repeat如下：

HTML：

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

但是，当点击它时，我没有调用将其设置为活动选项卡的方法，而是看到所有选项卡在页面加载时列出，并且活动选项卡在单击时不会更改。这是我的角度：

$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课程的样式。

Answer 2

试试这个......

<强> HTML

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

<强> JS

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

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

使用ng-repeat，ng-click和$ scope

2 个答案: