使用 Angular 单击元素时添加和删除类

Question

我想知道如何在使用 AngularJS 单击 div 时向 HTML 元素添加或删除类。我有一个 div，当我点击它时，我需要检查它是否包含一个类（'already-member'）。如果该类存在，则删除它，如果不存在，则添加它。我知道如何在 Javascript 中执行此操作，但在 Angular 中不确定。

tab-members.html

<div collection-repeat="friend in user.friends" item-width="50%" item-height="80px" class="friends-list">
  <div class="item friend-avatar" ng-class="{'already-member' : friend.already_member == true}" ng-click="toggleStatus()">
    <div class="avatar">
      <img src="{{friend.avatar_url}}">
      <i class="check-icon" ng-class="{'hidden' : friend.already_member == false}"></i>
    </div>
    <div class="wrapper-friend-name">
      <p class="friend-name">{{friend.name}}</p>
    </div>
  </div>
</div>

这是 controllers.js 中的代码

.controller('MembersCtrl', function($scope) {
  $scope.members = [
    {avatar_url: "http://..."},
    {avatar_url: "http://..."},
    {avatar_url: "http://..."},
    {avatar_url: "http://..."}
  ];
  $scope.user = {
    avatar_url: "http://...",
    friends: [
      {avatar_url: "http://...", name: "Pablo Pepunto", already_member: true},
      {avatar_url: "http://...", name: "Pablo Pepunto", already_member: false},
      {avatar_url: "http://...", name: "Pablo Pepunto", already_member: false},
      {avatar_url: "http://...", name: "Pablo Pepunto", already_member: false}
    ]
  }
  $scope.$on('$ionicView.beforeEnter', function (event, viewData) {
    viewData.enableBack = true;
  });
  $scope.toggleStatus = function($scope) {
    console.log('$scope'); //$scope is undefined
    $scope.classList.toggle('already_member');
    $scope.already_member = !$scope.already_member;

  }
})

Answer 1

我会做以下事情：

在模板中：

ng-click="toggleStatus(friend)"

在控制器中：

$scope.toggleStatus = function(friend) {
    friend.already_member = !friend.already_member;
}

那么你定义的ng-class="{'hidden' : friend.already_member == false}" 指令应该可以工作了。

Answer 2

1. 在您的 div 元素上添加一个 ng-click 侦听器。触发点击后，在控制器中切换布尔变量 isMember 以设置类。
2. 使用 ng-class 指令和 div 上的 isMember 变量来检查是否设置了 isMember：ng-class="{'already-member': isMember}"

你也可以像这样直接设置和使用变量：

<div ng-click="isMember = !isMember" ng-class="{'already-member': isMember}">

我建议在控制器中设置标志以获得更好的可读性。