CODEWITHSUNDEEP
angularjs
krish
krish

Reputation: 1117

Applying CSS style conditionally in ng-repeat in AngularJS

This is my code.Am applying css for if condition and removing that css for else condition its working fine.
But I dont want to use 2 <tr> within one tr I need to achieve this and I dont want to use inine css.

<tr ng-repeat="data in userList"
   ng-if="data.appDate>=delivery.joinedDate"
   ng-style="{'background-color': '#ffd6d6','border':'dashed 3px #9e0b0f'}">
    <td>{{$index+1}}</td>
    <td>{{data.name }}</td>
    <td>{{data.age}}</td>
    <td>{{data.dept}}</td>
    <td>{{data.appDate }}</td>
    <td>{{data.joinedDate}}</td>                         
</tr>
<tr ng-repeat="data in userList" ng-if="!(data.appDate>=delivery.joinedDate)">
    <td>{{$index+1}}</td>
    <td>{{data.name }}</td>
    <td>{{data.age}}</td>
    <td>{{data.dept}}</td>
    <td>{{data.appDate }}</td>
    <td>{{data.joinedDate}}</td>                         
</tr>

Any suggestion?

Upvotes: 1

Views: 1539

Answers (2)

Nikolaj Dam Larsen
Nikolaj Dam Larsen

Reputation: 5674

You would do this using the ng-class directive. You'll simply add your styling as a class in your stylesheet and change your angular code to this:

<tr ng-repeat="data in userList" 
    ng-class="{ 'my-css-class': data.appDate>=delivery.joinedDate }">
    <td>{{$index+1}}</td>
    <td>{{data.name }}</td>
    <td>{{data.age}}</td>
    <td>{{data.dept}}</td>
    <td>{{data.appDate }}</td>
    <td>{{data.joinedDate}}</td>                         
</tr>

Stylesheet:

.my-css-class {
    background-color: #ffd6d6;
    border: dashed 3px #9e0b0f;
}

Upvotes: 2

dCrux
dCrux

Reputation: 121

Try looking at ngClass.

You can dynamically set css based on a model.

Angularjs ngClass docs

As a note, inline styling is not good practice.

Upvotes: 0

Related Questions