Question

我尝试创建一个具有两个状态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;
    };
  });

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

单击“添加和删除类”

2 个答案: