Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 选择多个项目,而不仅仅是一个(angularJs)_Javascript_Angularjs - Fatal编程技术网

Javascript 选择多个项目,而不仅仅是一个(angularJs)

Javascript 选择多个项目,而不仅仅是一个(angularJs),javascript,angularjs,Javascript,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 phot

我已经在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>
一旦项目被选中,div的背景颜色为蓝色

.sel {
    background-color:#5ACBFF;
}

因此,如何正确编写控制器函数,以便您可以选择多个div和
$scope。selectd
变量收集产品ID。

在产品对象中,添加一个字段“selected”,以控制是否选择该项。并在ng中切换所选
的值,单击:

<figure class="...." ng-init="p.isSelected = false"
        ng-click="p.isSelected = !p.isSelected" ng-class="{sel: p.isSelected}">

目前,
$scope.selected=index仅保存一个索引,您需要将其设置为数组并切换当前选择:

变体1

 $scope.selected[index] = !$scope.selected[index];
并更改您的
ngClass
定义:

 ng-class="{sel: $index[selected]}"
 ng-class="{sel: p.selected}"
变体2

或更改您的
ngClick
-功能:

 ng-click="selectUserItems(p)"
以及
selectUserItems
功能

 $scope.selectUserItems = function(item){
    item.selected = !item.selected;
 };
并更改您的
ngClass
定义:

 ng-class="{sel: $index[selected]}"
 ng-class="{sel: p.selected}"

你试过什么?如果你给我们你的代码,我们实际上可以提供帮助。也许你可以给我们一个最小的JSFIDLE示例?到目前为止,我已经尝试在数组中推送变量,但问题是取消选择项。一旦我解决了这个问题,将divs涂成蓝色就不起作用了,这就是为什么我将代码恢复到可以选择的时间one@Derlin我正在努力哇,干得好。我甚至没有时间创作pluker或fiddle。谢谢