Vincent Tang Vincent Tang - 24 days ago 8
Javascript Question

how to change all the selected items background/class instead of change only one selected item in ng-repeat angular

How to change all the selected items background/class instead of change only one selected item in ng-repeat? The following is what i have tried but it doesn't work and doesn't show anything as well.

Html:

<div ng-repeat="product in CartProducts" ng-click="addToSelection(product)">
<div class="list">
<div ng-class="data.defaultClass" ng-show="data.show">
<i class="icon ion-checkmark-round" style="font-size:30px;text-align:right;opacity:0.5;"></i>
</div>

<a class="item item-thumbnail-left" ng-class="{checkedFloatingItem: selection.selectedNode == product}">
<img ng-src="{{product.image}}">
<h2 style="font-size:20px">{{product.name}}</h2>
<div style="color:grey">
SKU: {{product.sku}}<br />
Price: RM{{product.price}}<br />
In Stock: {{product.quantity}}
</div>
</a>
</div>
</div>


Controller:

AddToCart.addProduct('X142082', 'img/pic.jpg', 'Product 1', 10);
AddToCart.addProduct('Y141414', 'img/pic.jpg', 'Product 2', 1);
AddToCart.addProduct('Z213254', 'img/ionic.png', 'Product 3', 5);
$scope.CartProducts = AddToCart.getProduct();

$scope.selection = {
selectedNode: []
};
$scope.addToSelection = function (index,node) {
$scope.selection.selectedNode.push(node);
}


CSS

.floatingItem {
position:absolute;
top: 0;
width:100%;
height:100%;
z-index: 5;
text-align:right;
}

.checkedFloatingItem {
opacity:0.5;
background-color:#CFD8DC;
color:black;
}

Answer

See https://plnkr.co/edit/qlae8dBDUc7vAXPPZx7w?p=preview

Add this to the controller:

$scope.isSelected = function(selection) {
    return product in selection.selectedNode;
}

In the template: <a class="item item-thumbnail-left" ng-class="{'checkedFloatingItem': isSelected(product)}">

Comments