Question

如果我有以下代码，如何在元素上切换活动类？

<div class="searchandfilter">
    <span ng-repeat="taxonomy in taxonomies" class="tab-controller" ng-class="{'active': $index == 0}">
        <ul>
            <li class="tab" ng-click="onClickTab(taxonomy)">{{taxonomy.name}}</li>
        </ul>
        <span class="tab-content">
            <span ng-repeat="child in taxonomy.children">
                <input type="checkbox" checked="child.value" />{{child.name}}
            </span>
        </span>
    </span>

在加载时我需要将第一个 tab-conroller 范围设置为活动，现在这是正确的，但我无法切换活动类onclick。选项卡的数量是动态的，因此它可以是1或10.目前它生成如下选项卡：

<span class="tab-controller ng-scope active" ng-class="{'active': $index == 0}" ng-repeat="taxonomy in taxonomies">
<ul>
<li class="tab ng-binding" ng-click="onClickTab(taxonomy)">Tab 1</li>
</ul>
</span>

<span class="tab-controller ng-scope" ng-class="{'active': $index == 0}" ng-repeat="taxonomy in taxonomies">
<ul>
<li class="tab ng-binding" ng-click="onClickTab(taxonomy)">Tab2</li>
</ul>
</span>

Answer 1

您需要在标签中添加一些属性才能与ng-repeat中的$ index进行比较。

例如：

<div class="tab-controller" ng-class="{'active': $index == currentTab}" ng-repeat="taxonomy in taxonomies">
    <ul>
        <li class="tab" ng-click="onClickTab(taxonomy.tab)">{{ taxonomy.name }}</li>
    </ul>
</div>

分类法应该是一个对象数组，如：

var taxonomies = [
    { id: 0, name: 'Tab 1', tab: 'whatever you need here'},
    { id: 1, name: 'Tab 2', tab: 'whatever you need here'},
    { id: 2, name: 'Tab 3', tab: 'whatever you need here'}
];

当您调用函数onClickTab时，它应该将变量scope.currentTab设置为单击选项卡的id。

希望它有所帮助。

Answer 2

您可以通过传递索引并设置范围变量来完成此操作。

var app = angular.module('app', []);

app.controller('myController', function($scope) {
  $scope.taxonomies = [
    {name: 'a', children: [{name: 'a', value: false}]}, 
    {name: 'b', children: [{name: 'a', value: true}, 
                           {name: 'b', value: false}]}
  ];
  
  $scope.onClickTab = function(idx) {
    $scope.selectedIndex = idx;
  };
  
  $scope.selectedIndex = 0;
});

.active {
  color: green;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>

  <div class="searchandfilter">
    <span ng-repeat="taxonomy in taxonomies" class="tab-controller" ng-class="{'active': $index == selectedIndex}">
        <ul>
            <li class="tab" ng-click="onClickTab($index)">{{taxonomy.name}}</li>
        </ul>
        <span class="tab-content">
            <span ng-repeat="child in taxonomy.children">
                <input type="checkbox" ng-model="child.value">{{child.name}}
            </span>
    </span>
    </span>
  </div>
</div>

该方法的问题是，如果分类法发生变化，selectedIndex可能不再与选定的标签匹配，因此您可以只追踪整个对象而不是跟踪索引：

var app = angular.module('app', []);

app.controller('myController', function($scope) {
  $scope.taxonomies = [
    {name: 'a', children: [{name: 'a', value: false}]}, 
    {name: 'b', children: [{name: 'a', value: true}, 
                           {name: 'b', value: false}]}
  ];
  
  $scope.onClickTab = function(selected) {
    $scope.selected = selected;
  };
  
  $scope.selected = $scope.taxonomies[0];
});

.active {
  color: green;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>

  <div class="searchandfilter">
    <span ng-repeat="taxonomy in taxonomies" class="tab-controller" ng-class="{'active': taxonomy === selected}">
        <ul>
            <li class="tab" ng-click="onClickTab(taxonomy)">{{taxonomy.name}}</li>
        </ul>
        <span class="tab-content">
            <span ng-repeat="child in taxonomy.children">
                <input type="checkbox" ng-model="child.value">{{child.name}}
            </span>
    </span>
    </span>
  </div>
</div>

Answer 3

抱歉，如果错了，试试这个

http://plnkr.co/edit/FdueM4rAvd4k6hClK1HR?p=preview

你的html将是

track2tracks

angular js代码将是

<html>

<head>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="app">

  <div class="searchandfilter" ng-controller="tab-controller">

    <span ng-repeat="taxonomy in taxonomies">
        <ul  ng-class="{'active': $index == selectedIndex}">
            <li class="tab" ng-click="onClickTab(taxonomy.id)">{{taxonomy.name}}
              <br/>
                <span class="tab-content">
                  <span ng-repeat="child in taxonomy.children">
                      <input type="checkbox" ng-model="child.value" />{{child.name}} 
                  </span>
                </span>
            </li>
        </ul>
    </span>
  </div>

</body>
</html>

css代码将

  var app = angular.module("app",[]);
    app.controller('tab-controller',['$scope',function($scope){

    $scope.taxonomies = [
    { id: 0, name: 'hello' , children:[{name:"test1",value:true},{name:"test2",value:false}]},
    { id: 1, name: 'how' , children:[{name:"test5", value: false}]},
    { id: 2, name: 'are you',children:[{name:"test4",value: true}]}
    ];

    $scope.onClickTab= function(x){
      $scope.selectedIndex= x;
    };

  }]);

使用angular.js

3 个答案: