change background color with 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.

Try console.logging the read object in the javascript, and try to print it in the html (<pre ng-bind="read | json"></pre>). Do they match? — Phillip
– Phillip, Commented Mar 29, 2016 at 13:36
what is rssFeedService? Is this an angular service or a third party library's function ? — S4beR
– S4beR, Commented Mar 29, 2016 at 13:41

shammelburg · Accepted Answer · 2016-03-29 14:28:40Z

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.

edited Mar 29, 2016 at 14:28

answered Mar 29, 2016 at 13:36

shammelburg

7,3687 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

semper fi Over a year ago

q.isRead determine true or false, I've tried your example, but it didn't set color on it

shammelburg Over a year ago

@Vitaliy you set a class on your element.

semper fi Over a year ago

if I understood you correctly, I set this class on q.link or q.body and it did not change colors

shammelburg Over a year ago

Going by your example, you should be able to replace your h1 tag with my one. You should create the classes .green and .red as well.

Collectives™ on Stack Overflow

change background color with angularjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related