I am new to ionic framework, i am trying to highlight the selected item from the list.
Tried to find solution and tried lot of trial and error, could not succeed.
Would be helpful, if you could let me know the solution.
Please find the code snippet below:
You may looking for ng-class directive, the following example may help you:
<ion-content padding="true">
<ul class="product-list">
<!-- You need a .selected in your stylesheet -->
<li ng-repeat="(key, item) in products" ng-class="{item.selected: 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;
}
}
}]);
