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生成的按钮有关，当我单击它们时，它会将活动类添加到该按钮中，但是当我单击另一个按钮时，它并没有删除该类，因此它们都可以具有激活类

我在做什么错了？

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>

Answer 2

新的AngularJS开发人员常常没有意识到ng-repeat，ng-switch，ng-view，ng-include和ng-if都创建了新的子范围，因此问题经常出现当涉及这些指令时显示。

正在selectedTab = key指令创建的子作用域上完成分配ng-repeat。解决方案是对对象的属性进行赋值：

<div class="btn-group" role="group" aria-label="Basic example"
     ng-init="selected = {tab:'raw'}">

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

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

有关更多信息，请参见What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

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

2 个答案: