Javascript 如何在ng类中正确使用ng init

我有一行按钮，希望将第一个按钮初始化为活动（因为与它关联的数据加载到控制器的init函数中）。下面的HTML非常好用，但是当我单击其他两个按钮时，“active”类仍保留在第一个按钮上。我希望此按钮在页面加载时设置为活动，然后“正常”处理（即：如果单击其他按钮，则从第一个按钮删除活动类）：

丛生
未群集
热图

虽然这并没有回答您最初的问题，但这里有一个可行的解决方案（我不得不说，效率不高）：

HTML:

应简单如下：

如果您使用的是循环，那么它甚至是干净的——只需传递索引即可

<button class="btn btn-default" ng-class="isActive[0] ? 'active' : ''" ng-init="isActive[0]=true"  type="button" ng-click="toggleButton(isActive,0)">Clustered</button>
<button class="btn btn-default" ng-class="isActive[1] ? 'active' : ''"  type="button" ng-click="toggleButton(isActive,1)">Unclustered</button>
<button class="btn btn-default" ng-class="isActive[2] ? 'active' : ''"  type="button"  ng-click="toggleButton(isActive,2)">Heatmap</button>

集群
未群集
热图

对于您的

ng单击功能，可能存在重复的代码可能会很有帮助。我们甚至不知道您是否将其上的
isActive
设置为
false
。是否需要将单击的另一个按钮设置为active？同意，根本不是有效且无角度的解决方案；）
<div class='container' ng-controller="GoingStack">
  <div switch class="button" ng-class="{'active-button': state}">1</div>
  <div switch class="button">2</div>
  <div switch class="button">3</div>
</div>

app.controller('GoingStack', ['$scope', function($scope) {
  $scope.state = true;
}]);
var active = document.getElementsByClassName('button');
app.directive("switch", [function() {
  return {
    link: function(scope, element, attr) {
        element.bind('click', function(e){
            scope.state = false;
            active[0].classList.remove('active-button');
            element.addClass('active-button');
        });
     }
  }
}]);

<button class="btn btn-default" ng-class="isActive[0] ? 'active' : ''" ng-init="isActive[0]=true"  type="button" ng-click="toggleButton(isActive,0)">Clustered</button>
<button class="btn btn-default" ng-class="isActive[1] ? 'active' : ''"  type="button" ng-click="toggleButton(isActive,1)">Unclustered</button>
<button class="btn btn-default" ng-class="isActive[2] ? 'active' : ''"  type="button"  ng-click="toggleButton(isActive,2)">Heatmap</button>