AngularJS: ng-class - Using multiple classes?

Question

I am new to AngularJS.

I want to add a class to the second column based on it's value. Example: I want add the class 'positive' if the value is > 0 and class 'negative' when it is < 0.

What I am currently using:

<td data-ng-class="{positive: $index==1 && {{values}} > 0 , negative:{{values}} < 0 && $index==1 }" ng-repeat="values in portfolio" >{{values}}</td>

Now, this seems to be working (see image):

But, I am getting the following in my console:

Error: [$parse:syntax] http://errors.angularjs.org/1.2.7/$parse/syntax?p0=%26&p1=is%20unexpected%2C%20expecting%20%5B%7D%5D&p2=26&p3=%7Bpositive%3A%20%24index%3D%3D1%20%26%26%20S%26P500%20%3E%200%20%2C%20negative%3AS%26P500%20%3C%200%20%26%26%20%24index%3D%3D1%20%7D&p4=%26P500%20%3E%200%20%2C%20negative%3AS%26P500%20%3C%200%20%26%26%20%24index%3D%3D1%20%7D at Error () at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:6:449 at Xa.throwError (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:155:346) at Xa.consume (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:156:325) at Xa.object (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:164:115) at Xa.primary (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:154:482) at Xa.unary (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:161:240) at Xa.multiplicative (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:160:480) at Xa.additive (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:160:325) at Xa.relational (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:160:204)

Answer 1

Try:

<td data-ng-class="{positive: $index==1 && values > 0, negative:values < 0 && $index==1 }" ng-repeat="values in portfolio" >{{values}}</td>

Answer 2

You should change {{values}} to values

<td data-ng-class="{positive: $index==1 && values > 0 , negative:values < 0 && $index==1 }" ng-repeat="values in portfolio" >{{values}}</td>