Ali Ali - 6 months ago 17
Javascript Question

How to use ng-class according to the html content - AngularJS

I am printing each element in my array as an HTML paragraph using

ng-repeat
.

<p ng-repeat="item in queries track by $index">{{ item }}</p>


The result is:

------------ title 1 --------------
content 1
------------ title 2 --------------
content 2
------------ title 3 --------------
content 3
------------ title 4 --------------
content 4


The problem is that I can't seem to figure out how to custom style paragraphs (e.g
color:red;
).

Answer

If you want to use ng-class, you can use this syntax:

ng-class="{'class-name': item.indexOf('title') >= 0}"

Or, you can use ng-style like this:

ng-style="setColor(item)"

With the function:

$scope.setColor = function (item) {
    if (item.indexOf("title") >= 0) {
        return { color: red };
    }
}
Comments