如何在ng-class中正確使用ng-init

Question

我有一排按鈕，並且想將第一個按鈕初始化為活動狀態（因為與其關聯的數據已加載到控制器的init函數中）。 下面的HTML效果很好，但是當我單擊其他兩個按鈕時，“活動”類仍保留在第一個按鈕上。 我希望此按鈕在頁面加載時設置為活動狀態，然后“正常”處理（即：如果單擊了其他按鈕，則從第一個按鈕中刪除活動類）：

<div class="btn-group btn-group-sm">
  <button class="btn btn-default" ng-class="{active : isActive}" ng-init="isActive = true" type="button" ng-click="playerMap.clusterToggle(true)">Clustered</button>
  <button class="btn btn-default" type="button" ng-click="playerMap.clusterToggle(false)">Unclustered</button>
  <button class="btn btn-default" type="button" id="heatmap" ng-click="playerMap.heatmap()">Heatmap</button>
</div>

Answer 1

應該簡單如下：

如果您使用的是循環，那么它甚至很干凈-只需傳遞索引即可。

<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>

Answer 2

盡管這不能回答您的最初問題，但這是一個可行的解決方案（我不得不說效率不高）：

HTML：

<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');
        });
     }
  }
}]);