CODEWITHSUNDEEP
htmlcssangularjsionic-frameworkmultiple-select
Salman Ullah Khan
Salman Ullah Khan

Reputation: 728

Multiple selection from grid in ionic framework

I want to make a grid of categories images, select multiple categories from them and send their values to controller. I don't know how to achieve this with ionic framework.

Here is my view:

 <ion-view  cache-view="false">
 <div class="bar login-bar bar-header bar-stable">
   <h1 class="title ttl-log-bar">Welcome</h1>
 </div>
 <div class="bar bar-subheader welcome-subhead">
   <h2 class="title welc-sub-h2">What do you like to shop for?</h2>
   <h5 class="title welc-sub-h5">Pick at least one category</h5>
 </div>
   <ion-content scroll="true" class="has-header has-subheader">
     <div class="row row-cat" style="flex-wrap: wrap;">
       <div class="col col-cat col-50" ng-repeat="items in categoryList">
         <img ng-src="{{items.image}}" width="100%" />
       </div>
     </div>       
   </ion-content>
 </ion-view>

Upvotes: 0

Views: 1015

Answers (1)

Przemek
Przemek

Reputation: 803

Add on img tag ng-click with function passing e.g. ID like this: 

<img ng-src="{{items.image}}" ng-click="selectCategory(items.id)" />

Then in controller define this function 

$scope.selectedCategory = [];
$scope.selectCategory = function(id){
  var index = $scope.selectedCategory.indexOf(id);
  if(index === -1){
     $scope.selectedCategory.push(id);
  }else{
     $scope.selectedCategory.splice(index, 1);
  }
}

Then you can us selectedCategory array as a collection of selected item's IDs

Upvotes: 1

Related Questions