Is there a way to dynamically change the background color of a bound list item based on predefined logic? For example, if a variable is bound to the backgroundColor property and I want to change the color according to some conditions (red for state=0, blue for state=1, and black for state=2).
I could manually manipulate the DOM in the click event, but that would result in messy code and require updating $scope.items[x] as well.
Is there a cleaner solution to achieve this?
<ul ng-app ng-controller="MyCtrl">
<li ng-repeat="i in items" ng-click="toggle()"> <span style="background-color: {{i.state}}"> {{i.name}} </span> </li>
</ul>
function MyCtrl($scope) {
$scope.items = [{"name":"a","state":"1"},{"name":"b","state":"2"}, {"name":"c","state":"0"}];
$scope.toggle = function(){
// toggle the state i.e.
// if state<3 then state++
// else state=0
};
};