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;
    }
  }
}]);

Source

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 文件中覆盖以下内容：

1...10

（或者将这些变量设置为sass颜色图中的更改条目）

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

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

3 个答案: