单击ng更改列表项的活动bg颜色

Change list item active bg-color with ng-click

本文关键字：活动 bg 颜色 列表 ng 单击      更新时间：2023-09-26

我对这个问题有点不知所措。

当我单击-a href标记时，我希望li活动背景颜色更改为我存储在每个对象中的特定颜色，就像obj.color" = #5c6bc0一样。

<li ng-repeat="obj in tags" ng-class="{active: obj.id == tagStates.activeItemID}">
     <a href ng-click="tagStates.activeItemID = obj.id;">
          {{obj.name}}
     </a>
</li>

我该怎么做？我尝试过ng风格的ng-style="{'active':'background-color': obj.color}，但没有成功。

感谢

您可以执行类似的操作

<li ng-repeat="obj in tags" ng-class="{active: obj.id == tagStates.activeItemID}" ng-style={backgroundColor: obj.id == tagStates.activeItemID ? obj.color : ''}">
    <a href ng-click="tagStates.activeItemID = obj.id;">
        {{obj.name}}
     </a>
</li>

angular
  .module('app', [])
  .controller('Ctrl', function() {
    this.tags = [
      { name: 'bob' },
      { name: 'rick' },
      { name: 'dave' }
    ];
  })
<body ng-controller="Ctrl as vm">
  <ul>
    <li ng-repeat="obj in vm.tags" ng-class="{'active': vm.active == obj.name}">
      <a ng-click="vm.active = obj.name">{{obj.name}}</a>
    </li>
  </ul>
  {{vm.active}}
</body>

https://plnkr.co/edit/wvKIUtJIb0AE1vpWDtv9?p=preview

相关文章：