Question

我想制作一个类别图像网格，从中选择多个类别并将其值发送给控制器。我不知道如何用离子骨架实现这一目标。

以下是我的观点：

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

Answer 1

在img tag ng-click上添加功能传递，例如这样的ID：

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

然后在控制器中定义此功能

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

然后您可以将selectedCategory数组作为所选项目ID的集合

在离子框架中从网格中多次选择

1 个答案: