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);
}

创建一个＆＃34;喜欢＆＃34; Angular.js按钮

1 个答案: