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

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

multiple-select ionic-framework angularjs css html

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

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

以下是我的观点:

 <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 回复 | 直到 9 年前

Przemek 9 年前

添加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的集合

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前