使用ng-click更改列表项活动bg-color

时间:2016-05-06 16:41:34

标签: javascript css angularjs

我对此问题感到有些失落。

当我点击 - 一个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-style - ng-style="{'active':'background-color': obj.color}但是没有用。

由于

2 个答案:

答案 0 :(得分:1)

您可以执行类似

的操作
<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>

答案 1 :(得分:0)

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>

http://plnkr.co/edit/bLh5Gp7fsLphjX0hcLSB?p=preview