选择多个项目,而不仅仅是一个(angularJs)
Select multiple items, not just one (angularJs)
我在div中显示了产品,用户可以单击它们来选择它们。我遇到的问题是只能选择一种产品。我不想将此功能更改为多选,并且功能应收集产品的ID。
这是我的产品 HTML
<div class="product_item hit w_xs_full" ng-repeat="p in products track by $index" style="float: left; background-color: blue;">
<figure class="r_corners photoframe type_2 t_align_c tr_all_hover shadow relative"
ng-click="selectUserItems($index)" ng-class="{sel: $index == selected}">
<!--product preview-->
<img ng-src="images/products/{{p.images[0].thumbName}}" alt="{{p.name}}" class="tr_all_hover">
<!--description and price of product-->
<figcaption>
<br>
<h5 class="m_bottom_10"><b>{{p.name}}</b></h5>
<p class="scheme_color f_size_large m_bottom_15" style="color:black;">Located in: <b>{{p.country}}</b></p>
<a href="#/swap/{{p.mainCategorieLink}}/{{p.subCategoryLink}}/{{p.alias}}">
<button class="button_type_4 bg_scheme_color r_corners tr_all_hover color_light mw_0 m_bottom_15">See item</button>
</a>
</figcaption>
</figure>
</div>
这是我用于选择项目的控制器功能
//select items
$scope.selectUserItems = function(index){
$scope.selected = index;
};
一旦项目被选中,div的背景是蓝色的
.sel {
background-color:#5ACBFF;
}
那么如何正确编写控制器函数,以便您可以选择多个div $scope.selectd
变量收集产品的ID。
目前,$scope.selected = index;
只包含一个索引,您需要将其设置为数组并切换当前选择:
变式 1
$scope.selected[index] = !$scope.selected[index];
并更改ngClass
定义:
ng-class="{sel: $index[selected]}"
变式2
或更改ngClick
函数:
ng-click="selectUserItems(p)"
和selectUserItems
功能
$scope.selectUserItems = function(item){
item.selected = !item.selected;
};
并更改ngClass
定义:
ng-class="{sel: p.selected}"
在产品对象中,添加一个字段"选定"以控制是否选择该项。并在 ng-click 中切换 selected
的值:
<figure class="...." ng-init="p.isSelected = false"
ng-click="p.isSelected = !p.isSelected" ng-class="{sel: p.isSelected}">
相关文章:
- 打开一个模态并将其链接到AngularJS中的指令
- 我想在AngularJS应用程序中创建一个输入数字框,用户不应该在该框上键入十进制数字.(一个整数输入框)
- AngularJS&JSON-从Previous&下一个对象
- angularjs移除焦点上的活动类并添加到下一个项目
- 使用AngularJS Directive WHITOUT$scope创建一个动态html元素
- 如何在所有ng点击事件AngularJS上启动一个方法
- AngularJS ng选项在选择一个选项后删除了默认的空白值
- AngularJS:如何用同一对象的另一个属性访问一个属性
- 在条形图中呈现数据AngularJS,如何制作一个好的多条形图
- 从AngularJS中的另一个文件中的控制器访问服务
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- 通过AngularJS promise下载一个文件
- AngularJS - 一个文件中的控制器和服务
- AngularJS:一个控制器中更新不同控制器中的值的事件
- Angularjs:一个在控制器之间共享数据的工厂
- AngularJS——一个更简单的绑定一对一和一对多关系的方法
- AngularJS-一个成功的promise可以返回空数据吗
- AngularJS - 一个变量的 2 个输入
- 我有一个嵌套的各种细节列表,并希望使用angularJs一个接一个地显示它们.我的代码将有助于理解我的查询
- AngularJS:一个接一个地听事件