Question

我有一排按钮，想要将第一个按钮初始化为活动状态（因为与之关联的数据已加载到我的控制器的初始化功能中）。下面的HTML效果很好，但是当我点击其他两个按钮时，“活动”就会生效。班级仍然在第一个按钮上。我希望此按钮在页面加载时设置为活动状态，然后通常处理＆＃39; （即：如果单击其他按钮，则从第一个按钮中删除活动类）：

Function(sender, e) docPreview(doctype, docno)

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

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

2 个答案: