Question

我在我的应用程序中有类似于Facebook风格的系统，我希望在用户点击时使类似按钮改变颜色。这是通过添加.active类来完成的，但是我无法弄清楚如何在ng-repeat中只获得一个项目来激活活动类。

继承我的观点：

<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将请求发送到服务器以存储在数据库中，一旦此请求成功，当控制器中的“favorite”变量变为true时，ng-class将类更改为活动状态：

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

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

提前致谢

Answer 1

这是因为您正在使用$ scope.favourited，因为所有ng-repeats只有该变量的单个副本，因此它会更新所有。因此，请根据您的要求尝试使用某个变量作为单个记录，因为您只想将单个记录标记为最喜欢的记录。

替换

带有ng-class="{'active': favourited}"

的

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

和

带有$scope.favourited = true;

的

data.favourited = true;

Answer 2

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

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

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

Answer 3

只需在每个favorite元素上设置data属性即可。一旦您的请求成功完成，请更改数据的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>

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

4 个答案: