用Angular.js創建一個「贊」按鈕

我試圖用Angular.js創建一個喜歡的按鈕。（這只是一個心臟圖標，默認顏色是白色=不喜歡，喜歡時是紅色的，喜歡/不喜歡是通過點擊切換）我從我的Web服務獲得一些數據，這些數據也有一些ID的數組。這些ID是之前點擊類似按鈕的ID。用Angular.js創建一個「贊」按鈕

然後我根據從Web服務檢索到的數據使用ng-repeat指令填充DOM。

我附加按鈕一個ng-class，它設置適當的類和一個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>

控制器：

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

編輯：增加了從Web服務

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

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

來源

2015-11-21 Vandervidi

可以作爲一個標誌，一些額外的屬性使用檢索到的一個可能的數據那最初在每個photo元素上都沒有定義 - 比如photo.liked 。當用戶點擊它時，$scope.like函數將此屬性設置爲true。然後ng-class評估photo.liked爲真，並將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); 
}

來源

2015-11-21 18:40:00 shershen

我的想法做確切的事情，但是這並不解決問題的按鈕一樣，必須根據第一初始化來自Web服務的數據。 – Vandervidi

你是什麼意思'按鈕必須被初始化'？它是模板的一部分，迭代照片數組。當定義照片數組時，您將在模板 – shershen

中顯示數據。我的意思是，在您的解決方案中，所有按鈕都設置爲「不同於狀態」。如果我從服務中獲得一個「喜歡」的按鈕，該怎麼辦？您的解決方案將顯示爲不喜歡而不喜歡。 – Vandervidi

用Angular.js創建一個「贊」按鈕

回答

相關問題