仅将 class 添加到 AngularJS 中的特定 ng-repeat

Question

我的应用程序中有一个类似 Facebook 风格的系统，我想在用户点击时让“赞”按钮改变颜色。这是通过添加一个 .active class 来完成的，但我无法弄清楚如何让我的 ng-repeat 中的一个项目具有 thr active class.

这是我的观点：

<div class="list card" ng-repeat="data in array">
  <div>
    <a ng-click="favourite(data.ID)" class="tab-item" >
      <i ng-class="{'active':  favourited}" class="icon ion-thumbsup" ></i>
      Favourite
    </a>
  </div>
</div>

ng-click 将请求发送到服务器存储在数据库中，ng-class 将 class 更改为 active 当 "favourite" 变量来自控制器此请求成功后更改为 true：

$scope.favourite = function(dataID){
    $favourite.favourite(dataID).then(function(data){
      $scope.favourited = true;
    });
  }

这会导致所有最喜欢的按钮都处于活动状态，所以我只是不知道如何只激活当前按钮。

提前致谢

Answer 1

您不能使用全局布尔值来表示数组的特定元素是最喜欢的元素。

不是在范围中存储布尔值，而是存储最喜欢的元素，并使用active: data == theFavoriteElement。

或者，如果可以收藏多个元素，则在元素本身中存储一个布尔值 ，然后使用 active: data.favorite.

Answer 2

这是因为您正在使用 $scope.favourited，因为对于所有 ng-repeats，此变量只有一个副本，因此它会为所有变量更新。因此，请尝试根据您的要求为单个记录使用一些变量，因为您一次只想将单个记录标记为收藏。

替换

ng-class="{'active': favourited}" 与 ng-class="{'active': data.favourited}"

和

$scope.favourited = true; 与 data.favourited = true;

Answer 3

只需在每个 data 元素上设置 favorite 属性。一旦您的请求成功完成，请更改您的数据favorite 属性而不是 $scope 的属性。

<div class="list card" ng-repeat="data in array">
  <div>
    <a ng-click="favourite(data.ID)" class="tab-item" >
      <i ng-class="{'active':  data.favorited}" class="icon ion-thumbsup" ></i>
      Favourite
   </a>
  </div>
</div>

在你的控制器中：

$scope.favourite = function(dataID){
    $favourite.favourite(dataID).then(function(data){
        data.favourited = true;
    });
}

Answer 4

这应该可以完成工作，但是如果您想要保留最喜欢的数据，则必须将模型与后端的数据绑定。例如，如果标志保存在 data，您应该更改

<div>
  <a ng-click="active = !active" class="tab-item" ng-model="active" >
    <i ng-class="{'active': active}" class="icon ion-thumbsup" ></i>
      Favourite
  </a>
</div>

到

<div>
  <a ng-click="favorite(data)" class="tab-item">
    <i ng-class="{'active': data.active}" class="icon ion-thumbsup" ></i>
      Favourite
  </a>
</div>

$scope.favorite = function(data) {
    //use $http or $resource to update the data in backend
    //for example if you used $resource service
    data.favorite = !data.favorite;
    data.$save();
};

============

<!DOCTYPE html>
<html ng-app="test">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body ng-controller="testCtrl">
<div class="list card" ng-repeat="data in a">
  <div>
    <a ng-click="active = !active" class="tab-item" ng-model="active" >
      <i ng-class="{'active': active}" class="icon ion-thumbsup" ></i>
      Favourite
    </a>
  </div>
</div>
</body>
</html>

仅将 class 添加到 AngularJS 中的特定 ng-repeat

Only add class to specific ng-repeat in AngularJS

angularjs

angularjs-ng-repeat

ng-class