只有在AngularJS中为特定的ng-repeat添加类

我在我的应用中有一个像Facebook系统样式的系统，并且我想在用户点击时让类似按钮改变颜色。这是通过添加一个.active类来完成的，但我无法弄清楚如何让我的ng-repeat中的一个项目拥有活动类。只有在AngularJS中为特定的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-点击发送请求到服务器在数据库中存储和NG-类的类变为主动当从控制器的“最爱”变量更改为true一旦这个请求是sucesfull：

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

这将导致所有的偏好选项按钮的变得活跃，所以我只是不知道如何使刚刚当前按钮激活。

在此先感谢

来源

2016-04-02 JamesG

这是因为您使用的是$ scope.favourited，因为这个变量只有一个副本用于所有的ng-repeats，因此它会更新所有。因此，尽可能按照您的要求使用某个变量作为个人记录，因为您只想将单个记录一次标记为收藏。

更换

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

和

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

来源

2016-04-02 07:16:42 Harpreet

不能使用全局布尔说，一个数组的具体元素是最喜欢的一个。

取而代之的是在范围内存储布尔值，存储元素这是最喜欢的，并使用active: data == theFavoriteElement。

或者，如果有多个元素可以收藏，请在元素本身中存储布尔值，并使用active: data.favorite。

来源

2016-04-02 07:15:50

只需设置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; }); }

来源

2016-04-02 07:17:11 iulian

-1

这应该做的工作，但如果你想收藏夹数据保存，那么你必须从后端的数据模型绑定。例如，如果标志被保存在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>

来源

2016-04-02 07:33:07

只有在AngularJS中为特定的ng-repeat添加类

回答

相关问题