ng-click 添加和删除类答案

【问题标题】：ng-click adding and removing classesng-click 添加和删除类
【发布时间】：2014-01-14 02:23:18
【问题描述】：

我试图创建一个点击函数，它有两种状态 add 和 added 这两种状态在我的解决方案中都是可见的，但是我只希望一次显示一个状态。到目前为止，我的逻辑是按以下方式构建它。演示我注意到当我单击该类已激活的项目时，我无法删除该类。 Demo

<div ng-repeat= "fav in fav">
   <div ng-click="select(fav)" ng-class="favClass(fav)" class="panel-controls panel-controls__item">
   {{fav}}
</div> 

    var app = angular.module("myApp", []);
  app.controller("favouriteBtn", function ($scope){

     $scope.fav = ['add', 'added'];
     $scope.selected = $scope.fav[0];

     $scope.select = function(fav) {
        $scope.selected = fav;
      };

    $scope.favClass = function(fav){
      return fav === $scope.selected ? 'active' : underfined;
    };
  });

【问题讨论】：

标签： angularjs ng-repeat angularjs-ng-click

【解决方案1】：

只是猜测：

ng-class="{active: fav == selected}"

或者如果您只想更改按钮的显示：

ng-show="fav == selected"

或

ng-show="fav != selected"

【讨论】：

它在一定程度上可以工作，但一次不会显示一种状态。例如，在我的演示中，我有两个盒子，我试图只显示一个。
那你应该试试 ng-show="fav == selected" 或 ng-show="fav != selected"
谢谢，我对此的唯一问题是，仅文本更改我希望背景颜色也更改，我已设置活动类以显示为绿色。当我使用 ng-show 功能时，它显示为无。当我更改为显示块时，活动状态处于非活动状态。
如果您需要更改的不仅仅是显示，您可以使用 ng-class varinat。

【解决方案2】：

我会按照迈克尔所说的去做。

在观点上：

<div class="{{selected}}">
  <div ng-show="selected == 'add'">
    <button ng-click="toggleButton()">Button1</button>
  </div>
  <div ng-show="selected == 'added'">
    <button class='disabled'>Button2</button>
  </div>
</div>

在控制器上：

angular.module('myApp').controller('ButtonCtrl',
[
  '$scope',
  function($scope){
    $scope.fav = ['add', 'added'];
    $scope.selected = fav[0];

    $scope.toggleButton = function(){
      $scope.selected = fav[1];
    };
  }
]);

【讨论】：