仅将类添加到AngularJS中的特定ng-repeat [英] Only add class to specific ng-repeat in AngularJS

问题描述

我的应用程序中有一个Facebook风格的系统，我希望用户单击时使赞"按钮更改颜色.这可以通过添加.active类来完成，但是我无法弄清楚如何仅使ng-repeat中的一项具有thr活动类.

I have a Facebook style like system in my app and I want to make the like button change colour when the user clicks. This is to be done by adding an .active class, but I cant figure out how to get just the one item in my ng-repeat to have 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将请求发送到服务器以存储在数据库中，并且一旦请求成功，则当控制器中的收藏夹"变量更改为true时，ng-class将该类更改为active.

The ng-click sends the request to the server to store in the database, and the ng-class changes the class to active when the "favourite" variable from the controller changes to true once this request is sucesfull:

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

这会使所有收藏夹按钮都变为活动状态，所以我只是不知道如何仅使当前按钮处于活动状态.

This causes all of the favourite buttons to become active, so I just dont know how to make just the current button active.

预先感谢

推荐答案

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

This is because you are using $scope.favourited as there is only single copy of this variable for all ng-repeats, hence it updates for all. So try to use some variable for individual record as per your requirement as you only want to mark a single record as favourite at a time.

替换

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

和

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

这篇关于仅将类添加到AngularJS中的特定ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！