<ion-list>
<ion-item ng-repeat="item in familleItems">
<div ng-click="selectSousFamille(item.Numfam)">{{item.Nomfam}}</div>
</ion-item>
</ion-list>
请帮帮我
3 回答
0
Highlight hover item
纯粹用CSS
ion-item:hover a {
background-color: slategray !important;
}
Highlight active item
您可以使用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;
}
}
}]);
3 回答
Highlight hover item
纯粹用CSS
Highlight active item
您可以使用ng-class添加活动的css类 . 为此“活动”类定义自定义CSS .
例:
Source
谢谢,它有效 . 我刚刚对您的代码进行了一些更改,因为我只想更改所选项目的背景颜色 . 这是我的代码
希望它可以帮助别人 .
最好的方法是覆盖 variables.scss 文件中的以下内容:
(或者将这些变量设置为sass颜色映射中的更改条目)