AngularJs：点击后用颜色高亮整个div卡片，选择另一张卡片后取消选择

Question

<div class="col-xs-12">
    <ul class="list-group">
         <li ng-repeat="item in shoppingItems" class="list-group-item text-center clearfix">
          <div class="card-body text-dark" ng-click="highlight(item.id)">
            <span style="font-weight:bold">{{item.itemName}}</span>
            <img ng-src="{{ item.imgUrl }}" width="40" height="40"/>
            </div>
         </li>
    </ul>
</div>


 $scope.highlight = function(id){
        console.log("Card id"+id);
        document.getElementById('selectedRow').style.backgroundColor = 'blue';
    }

注意：我在卡上select后可以得到卡的id。但是当我点击卡片时，颜色没有改变。

Answer 1

您应该使用 ng-class 来动态添加 class:

https://stackblitz.com/edit/angularjs-bxpwnw?file=home%2Fhome.controller.js

JS:

$scope.highlight = function(itm) {
  itm.highlighted = true;
}

HTML:

<div class="col-xs-12">
    <ul class="list-group">
        <li ng-repeat="item in shoppingItems" class="list-group-item text-center clearfix">
          <div class="card-body text-dark" ng-click="highlight(item)" ng-class="{'color--highlighted': item.highlighted}">
            <span style="font-weight:bold">{{item.itemName}}</span>
            <img ng-src="{{ item.imgUrl }}" width="40" height="40"/>
            </div>
        </li>
    </ul>
</div>

CSS:

.color--highlighted {
  background-color: blue;
}