Question

如何更改所有选定的项目背景/类而不是仅更改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;
}

Answer 1

请参阅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)}">

如何更改所有选定的项目背景/类而不是仅更改ng-repeat angular

1 个答案: