如何在Ionic的离子列表中更改按下项目的背景颜色？

Question

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

index.html

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

请帮帮我

Answer 1

突出显示悬停项目

纯粹使用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;
    }
  }
}]);

资源

Answer 2

谢谢，它有效。 我只是对您的代码进行了一些更改，因为我只想更改所选项目的背景颜色。 这是我的代码

  <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, 'unselected' : !item.selected }">
                <div class="list card" ng-click="select_item(key,familleItems.length)">
                    <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 {
    background-color: gray !important;
}
.unselected{
    background-color: white !important;
}
    // 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.selectSousFamille = function(key, count) {

        for (var i = 0; i < count; i++) {
          if (key == i) {
            $scope.familleItems[i].selected = true;
          } else {
            $scope.familleItems[i].selected = false;
          }
        }

      }
    }]); 

希望它可以帮助别人。

Answer 3

最好的方法是通过覆盖variables.scss文件中的以下内容：

$list-ios-activated-background-color: #ff8902;
$list-md-activated-background-color: #ff8902;
$list-wp-activated-background-color: #ff8902;

（或将这些变量设置为您的萨斯色图的更改条目）

$list-ios-activated-background-color: lighten(color($colors, dark, base), 10%);
$list-md-activated-background-color: lighten(color($colors, dark, base), 10%);
$list-wp-activated-background-color: lighten(color($colors, dark, base), 10%);