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

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

     } 
    }]); 

、それは他の誰かを助けることができると思います。