更改离子列表视图中的所选项目颜色

时间:2016-04-22 16:13:24

标签: angularjs css3 ionic-framework

嗨,我是离子框架和css的新手。我有一些包含一些项目的列表视图。我想更改所选的项目列表颜色。 这是我的代码

<ion-list show-delete="shouldShowDelete" can-swipe="true">
  <ion-item ng-repeat="wishlist in wishListItems" class="item-thumbnail-left">
    <img src='data:image/png;base64,{{wishlist.wishlistItemImage}}'/>

    <h2>{{wishlist.wishlistItemName}}</h2>
    <ion-option-button class="button-assertive icon ion-trash-a" ng-click="deleteWishlistItem(wishlist.wishlistId)">
    </ion-option-button>


  </ion-item>
</ion-list>

我想知道所选项目的索引。 请帮我解决这个问题。

1 个答案:

答案 0 :(得分:0)

试试这个

  <style>
   .deleted{
      color:red;
    }
  .notdeleted{
    color:green;
   }
 </style>
  <ion-list show-delete="shouldShowDelete" can-swipe="true">
  <ion-item ng-repeat="(key,val) in wishListItems" class="item-thumbnail-left">

  <h2 ng-class="val.deleted ? 'deleted' : 'notdeleted'">{{val.wishlistItemName}}</h2>
  <ion-option-button class="button-assertive icon ion-trash-a" ng-click="deleteWishlistItem(key)">delete
</ion-option-button>

deleteWishlistItem()方法将

$scope.deleteWishlistItem = function(key){
   $scope.wishListItems[key].deleted = true;
}