如何改变所有选定的项目背景/类，而不是只改变一个选定的项目在ng-repeat角

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

本文关键字：项目 改变 一个 ng-repeat 背景 何改变      更新时间：2023-09-26

如何改变所有选定的项目背景/类，而不是只改变一个选定的项目在ng-repeat?以下是我尝试过的，但它不起作用，也没有显示任何东西。

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>

控制器:

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

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

添加到控制器:

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

模板中:<a class="item item-thumbnail-left" ng-class="{'checkedFloatingItem': isSelected(product)}">

相关文章：