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

Question

我想知道如何在使用 AngularJS 单击 div 时向 HTML 元素添加或删除 class。我有一个 div，单击时我需要检查它是否包含 class('already-member')。如果 class 存在，则删除它，如果不存在，则添加它。我知道如何在 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

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

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

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

我建议在您的控制器中设置标志以提高可读性。

Answer 2

我会做以下事情：

在模板中：

ng-click="toggleStatus(friend)"

在控制器中：

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

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

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

Add and remove class when element clicked with Angular

angularjs

angularjs-ng-click