How to Highlight selected item from list

2

Hi,

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

Hope this can help you, :smile:

[UPDATED] The following links may help you




3 Likes