代码之家 › 专栏 › 技术社区 › Salman Ullah Khan

离子框架中网格的多重选择

multiple-select ionic-framework angularjs css html

0

Salman Ullah Khan · 技术社区 · 8 年前

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

以下是我的观点:

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

1 回复 | 直到 8 年前

1

Przemek 8 年前

添加img标签ng点击,函数传递例如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的集合