AngularJS 为按钮组中的按钮提供活动类

Question

我有一个带有一些按钮的按钮组，两个用 html 创建，其他用 ng-repeat 创建。我希望单击按钮时有一个活动类，以便我可以自定义它以显示它已激活。

所以这就是我所做的：

<div class="btn-group" role="group" aria-label="Basic example"
     ng-init="selectedTab = 'raw'">

  <button class="btn"
     ng-click="selectView('raw'); selectedTab = 'raw'; console.log(selectedTab);"
     ng-class="{'active':selectedTab === 'raw'}">Raw data
  </button>
  <button class="btn"
     ng-click="selectView('summary'); selectedTab = 'summary'; console.log(selectedTab);"  
     ng-class="{'active':selectedTab === 'summary'}">Summary
  </button>

  <button class="btn" ng-repeat="(key, value) in views"
          ng-click="selectView(key); selectedTab = key; console.log(selectedTab);"
          ng-class="{'active':selectedTab === key}">
    {{ key }}
  </button>
</div>

我的问题是，对于两个第一个都正常工作，当我点击第一个按钮时，类被添加，当我点击第二个时，类从第一个中删除并添加到第二个中。

问题在于 ng-repeat 生成的按钮，当我点击它们时，它会将活动类添加到按钮中，但是当我点击另一个按钮时，它不会删除该类，因此它们都可以拥有 activate 类。

我究竟做错了什么 ？

Answer 1

请记住，它ng-repeat会创建自己的本地作用域，因此您在那里引用的任何未在父作用域上定义的变量都将在本地创建。尽管ng-click不鼓励您在其中放置多个命令- 这样做似乎也不会导致ng-repeat.

您可以通过selectedTab在控制器上创建一个属性并让该selectView方法设置 的值来解决所有这些问题selectedTab。这是一个快速示例：

angular.module('app', [])
  .controller('ctrl', ($scope) => {
    $scope.selectedTab = 'raw';
    $scope.views = {
      Detail1: 'details',
      Detail2: 'details',
      Detail3: 'details'
      };
      
      $scope.selectView = function(view) {
        $scope.selectedTab = view;
      }
  });

.active {
  color: red !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div class="btn-group" 
       role="group" 
       aria-label="Basic example">
    <button class="btn" 
            ng-click="selectView('raw')" 
            ng-class="{'active':selectedTab === 'raw'}">Raw data</button>
    <button class="btn" 
            ng-click="selectView('summary')" 
            ng-class="{'active':selectedTab === 'summary'}">Summary</button>

    <button class="btn" 
            ng-repeat="(key, value) in views" 
            ng-click="selectView(key)" 
            ng-class="{'active':selectedTab === key}">
      {{ key }}
    </button>
  </div>
</div>