html - 如何在Ionic的 ionic 列表中更改按下元素的背景颜色？

我有一个项目列表，我想更改离子项目中所按项目的背景颜色。


  index.html

<ion-list>
  <ion-item ng-repeat="item in familleItems">
    <div ng-click="selectSousFamille(item.Numfam)">{{item.Nomfam}}</div>
  </ion-item>
</ion-list>

请帮帮我

最佳答案

突出显示悬停项目

纯粹使用CSS

ion-item:hover a {
  background-color: slategray !important;
}

突出显示活动项目

您可以使用ng-class添加活动的CSS类。
为此“活动”类定义自定义CSS。

<ion-item ng-repeat="item in familleItems" ng-class="{'activeItem': active}">
    <div ng-click="selectSousFamille(item.Numfam)">{{item.Nomfam}}</div>
</ion-item>

例：

<ion-content padding="true">
    <ul class="product-list">
        <!-- You need a .selected in your stylesheet -->
        <li ng-repeat="(key, item) in products" ng-class="{'selected':item.selected}">
            <div class="list card" ng-click="select_item(key)">
                <p><span>{{item.title}}</span></p>
                <div class="item item-image">
                    <img ng-src="{{item.photo}}">
                </div>
            </div>
        </li>
    </ul>
</ion-content>
// Your Stylesheet
.selected {
    // Highlight style
}
// Your controller
.controller('SomeController', ['$scope', function ($scope) {

  // Expects an array, your product list may look like this
  $scope.products = [
    { "title": "Super Man's Tommy Toy", "price": 20000, "thumb": "DO_RE_MI.jpg" },
    { "title": "An old picture of Seldom", "price": 1999, "thumb": "MI_RE_DO.gif" }
  ];

  // Your logic for selection, e.g. unselect, select or something
  $scope.select_item = function (key) {
    if ($scope.products[key]) {
      $scope.products[key].selected = true;
    }
  }
}]);

Source

关于html - 如何在Ionic的 ionic 列表中更改按下元素的背景颜色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38456540/