Applying CSS style conditionally in ng-repeat in AngularJS

Question

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?

Nikolaj Dam Larsen · Accepted Answer · 2017-07-21 09:49:31Z

2

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;
}

answered Jul 21, 2017 at 9:49

Nikolaj Dam Larsen

5,7246 gold badges37 silver badges46 bronze badges

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

1 Comment

Nikolaj Dam Larsen Over a year ago

Css applies the most specific styles as the final, so one way is to make sure the class is the most specific - for instance classes directly targeting the element is always considered more specific than selectors targeting the parent class. It's tough to explain in a single SO comment, but I bet there are already questions related to this, under the CSS tag here on the site. :-)

dCrux · Accepted Answer · 2017-07-21 09:41:59Z

0

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.

answered Jul 21, 2017 at 9:41

dCrux

1215 bronze badges

Collectives™ on Stack Overflow

Applying CSS style conditionally in ng-repeat in AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related