使用 Angular.js 创建一个“赞”按钮

Question

我正在尝试使用 Angular.js 创建一个赞按钮。 （它只是一个心形图标。默认颜色为白色 = 不喜欢。喜欢时为红色。喜欢/不喜欢通过单击切换） 我从我的 Web 服务中获取了一些数据，这些数据也有一些 ID 的数组。这些 ID 是之前点击过点赞按钮的 ID。

然后我根据从 Web 服务检索到的数据使用 ng-repeat 指令填充 DOM。

我为按钮附加了一个设置正确类的 ng-class 和一个应该以某种方式更改类的 ng-click 指令。 * 我无法连接 ng-class 和 ng-click 结果。

一些代码：

<div ng-repeat="photo in photos track by photo._id">
    <button ng-class="{carouselFooterButtonLikeActive : initLike(photo)}" ng-click="like(photo, this)">
        <i class="icon ion-heart"></i>
    </button>
</div>

控制器：

//  Handle like button click
$scope.like = function(photo, photoScope){

    HOW CAN I AFFECT THE NG-CLASS FROM HERE?
}


$scope.initLike = function(photo){
    if(photo.likes.indexOf($localstorage.getObject('userInfo').id) > -1) {
        $scope.liked = true;
        return true;
    }

    $scope.liked = false;
    return false;
}

编辑：添加了从网络服务检索到的可能数据

{
    photos: [
      {
           src: "src1.jpg",
           likes:[111,222,333]
      },

      {
           src: "src2.jpg", 
           likes:[] 
      }
   ]
}

Answer 1

您可以使用一些附加属性作为标志，这些属性最初将在每个photo 元素上未定义 - 比如photo.liked。当用户单击它时，$scope.like 函数将此属性设置为 true。然后ng-class 将photo.liked 评估为true 并将carouselFooterButtonLikeActive 类添加到button 元素。

代码如下：

在模板中：

<button ng-class="{'carouselFooterButtonLikeActive' : photo.liked}" ng-click="like(photo, this)">

在控制器中：

$scope.like = function(photo, photoScope){
  photo.liked = true;
}

UPD 假设你有photos 数组：

[
{'src':'bla-bla.jpg', liked: true, id: 8347},
{'src':'foo-bar.jpg', id: 45},
{'src':'baz-baz.jpg', id: 47}
]

那么只有第一个会显示button.carouselFooterButtonLikeActive 类，这要感谢ng-class 评估表达式。

UPD2 如果 photo.likes 是一个数组，你可以使用：

//template
ng-class="{'carouselFooterButtonLikeActive' : (photo.likes && photo.likes.length >0)}"

//controller
$scope.like = function(photo, photoScope){
  photo.likes.push(someUserID);
}