Only add class to specific ng-repeat in AngularJS

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.

Heres my view:

<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>

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.

Thanks in advance

标签： angularjs angularjs-ng-repeat ng-class

4条回答

叼着烟拽天下

2楼-- · 2019-07-15 09:32

Just set the favorite property on each of your data element. And once your request is successfully completed, change the favorite property of your data and not the $scope's property.

<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>

And in your controller:

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

0人赞添加讨论(0) 举报

在下西门庆

3楼-- · 2019-07-15 09:43

You can't use a global boolean to say that a specific element of an array is the favorite one.

Instead of storing a boolean in the scope, store the element that is the favorite, and use active: data == theFavoriteElement.

Or, if several elements can be favorite, store a boolean in the element itself, and use active: data.favorite.

0人赞添加讨论(0) 举报

爱情/是我丢掉的垃圾

4楼-- · 2019-07-15 09:44

This should do the job, but if you want the favorite data to preserve, then you have to bind the model with the data from backend. for example, if the flag is saved in data, you should change

<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>

0人赞添加讨论(0) 举报

Explosion°爆炸

5楼-- · 2019-07-15 09:50

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.

Replace

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

and

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

0人赞添加讨论(0) 举报

Only add class to specific ng-repeat in AngularJS

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间