Angularjs 创建一个；例如；带有Angular.js的按钮

我试图用Angular.js创建一个类似的按钮。 （它只是一个心形图标。默认颜色为白色=不喜欢。喜欢时为红色。通过单击可切换喜欢/不喜欢） 我从我的web服务中获得一些数据，它也有一些ID的数组。这些ID是以前单击like按钮的ID

然后，根据从web服务检索到的数据，使用ng repeat指令填充DOM

我将按钮附加到一个设置适当类的ng类和一个ng click指令，该指令应该也会以某种方式更改该类。 *我无法连接ng类和ng单击结果

一些代码：

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

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

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

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

---

您可以使用一些附加属性作为标记，这些属性最初将在每个

photo

元素上未定义-例如

photo.liked

。当用户单击它时，

$scope.like

函数将此属性设置为true。然后

ng类

计算

photo.liked

为true，并将

carouselFooterButtonLikeActive

类添加到

按钮

元素

代码如下：

在模板中：

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

UPD 假设您有

照片

阵列：

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

然后，由于使用了

ng类

求值表达式，只有第一个按钮才会显示。carouselFooterButtonLikeActive类

UPD2 如果photo.likes是数组，则可以使用：

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

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

---

我本来想做正确的事情，但这并不能解决问题，因为like按钮必须首先根据web服务的数据进行初始化。你说的“按钮必须初始化”是什么意思？它是模板的一部分，遍历照片数组。定义照片阵列后，您将在Template中显示数据。我的意思是，在您的解决方案中，所有按钮都设置为“不同状态”。如果我从服务中得到一个“喜欢”的按钮怎么办？您的解决方案将显示为未链接，而不是喜欢。然后它仍然有效-如果其中一个数组项已喜欢=true，则它将从一开始就正确显示为喜欢。在用户单击按钮之前，不会定义check updated answerphoto.like。我认为这是一个误会。想象一下，您从web服务获得这样的数据：{photos:[{src:src1.jpg，likes:[111222333]}，{src:src2.jpg，likes:[]}。如您所见，第一个元素有3个like，第二个元素没有。当我加载我的模板，我想显示。并添加一个类似的切换，点击ng

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

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

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