使用 angularjs 更改背景颜色

Question

Continue discovering angularjs and stucked at changing colors on object, if it true - for ex. green, if false another color. I've tried to realized it but it shows me to all rendered data one color:

rssFeedService.getFeed().then(function (results) {
    $scope.feed = results.data;

    $scope.feed.forEach(function (checkitem){
        if (!checkitem.isRead) {
            $scope.read = {
                "color": "white",
                "background-color": "coral"
            }
        } else {
            $scope.read = {
                "color": "white",
                "background-color": "green"
            }
        }
    });

}, function (error) {
    //alert(error.data.message);
});

Here i'm getting data and with loop i'm set the color.

<div class="col-md-12" ng-repeat="q in feed">

    <a href="{{q.link}}">
        <h1 ng-click="isReadClick(q.id)" ng-style="read"> {{q.title}}</h1>
    </a>

    <h4>{{q.body}}</h4>

</div>

I Suppose that this happens because I'm using ng-style and should use ng-class for set static color.

Answer 1

If you are using ng-repeat then I would recommend ng-class.

<h1 ng-click="isReadClick(q.id)" ng-class="q.isRead ? 'green' : 'red'"> {{q.title}}</h1>

In the example, if q.isRead value is a true then set class green else set class red .