2016-05-06 7 views
2

この問題は少し紛失しています。ng-clickでアクティブなbg-colorを変更する

-h 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}で試しましたが、うまくいきませんでした。

おかげ

答えて

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

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

ような何かを行うことができます
関連する問題