angularjs - ng-click 添加和删除类

Question

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

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

Answer 1

只是一个猜测：

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

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

ng-show="fav == selected" 

或者

ng-show="fav != selected" 

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