Select multiple items, not just one (angularJs)

Question

I have displayed products in divs and users can click on them, to select them. The problem i have is that only one product can be selected. I wan't to change this functionality to be multi selected and function should collect id's of products.

This is my HTML for products

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

And this is my controller function for selecting items

//select items
$scope.selectUserItems = function(index){
    $scope.selected = index;
};

Once item is selected background of div is colored blue

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

So how to properly write controller function so you can select multiple divs and $scope.selectd variable collects ids of products.

So what have you tried? If you give us your code, we can actually help. — Johannes Jander
– Johannes Jander, Commented Feb 23, 2016 at 7:58
so far i have tried to push variables in array, but the problem was unselectings items. Once i fixed that issue, coloring divs blue didn't work so that's why i reverted the code to when i can select one — Valor_
– Valor_, Commented Feb 23, 2016 at 8:00

Johannes Jander · Accepted Answer · 2016-02-23 08:22:36Z

1

Currently, $scope.selected = index; holds only one index, you either need to make it an array and toggle the current selection:

Variant 1

 $scope.selected[index] = !$scope.selected[index];

and change your ngClass definition:

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

Variant 2

or change your ngClick-function:

 ng-click="selectUserItems(p)"

And the selectUserItems function

 $scope.selectUserItems = function(item){
    item.selected = !item.selected;
 };

and change your ngClass definition:

 ng-class="{sel: p.selected}"

answered Feb 23, 2016 at 8:22

Johannes Jander

5,0202 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Valor_ Over a year ago

wow, good job. I didn't even had a time to create pluker or fiddle. Thx

Mavlarn · Accepted Answer · 2016-02-23 08:13:21Z

1

In the product object, add a field 'selected' to control whether the item is selected. And toggle the value of selected in ng-click:

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

answered Feb 23, 2016 at 8:13

Mavlarn

3,8812 gold badges41 silver badges58 bronze badges

Collectives™ on Stack Overflow

Select multiple items, not just one (angularJs)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related