Use the CSS class

Question

Use the CSS class

To create tables with 3 rows and 2 columns using divs, I have utilized the ng-repeat directive. Within this setup, there are two CSS classes - red and green, that need to be applied in the following manner:

- Red class for the 1st column of the 1st row

- Green class for the 2nd column of the 1st row

- Green class for the 1st column of the 2nd row

- Red class for the 2nd column of the 2nd row

- Red class for the 1st column of the 3rd row

- Green class for the 2nd column of the 3rd row

I am looking for a way to efficiently implement these CSS rules. Any suggestions on how to achieve this setup?

angularjs css css-selectors

Answer 1

Answer №1

To accomplish this, you can utilize the variables $even and $odd, along with the directive ng-class.

var app=angular.module('plunker', []);
app.controller('ListCtrl',ListCtrl);
function ListCtrl($scope) {
  
  $scope.items = [
    {name: 'foo', value: 'foo value',car:'chevy',model:'vette',year:'2013'},
    {name: 'bar', value: 'bar value'},
    {name: 'baz', value: 'baz value'}
  ];
  
  
}

.red{color:red;}
.green{color:green;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="plunker">
  <head>

  </head>
  <body>
    <div ng-controller="ListCtrl">
      <table class="table table-bordered">
        <thead>
        <tr>
            <th>Name</th>
            <th>Value</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in items">
          <td ng-class="{'red':$even,'green':$odd}">{{item.name}}</td>
          <td ng-class="{'red':$odd,'green':$even}">{{item.value}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

Answer 2

To accomplish this, you can utilize the variables $even and $odd, along with the directive ng-class.

var app=angular.module('plunker', []);
app.controller('ListCtrl',ListCtrl);
function ListCtrl($scope) {
  
  $scope.items = [
    {name: 'foo', value: 'foo value',car:'chevy',model:'vette',year:'2013'},
    {name: 'bar', value: 'bar value'},
    {name: 'baz', value: 'baz value'}
  ];
  
  
}

.red{color:red;}
.green{color:green;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="plunker">
  <head>

  </head>
  <body>
    <div ng-controller="ListCtrl">
      <table class="table table-bordered">
        <thead>
        <tr>
            <th>Name</th>
            <th>Value</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in items">
          <td ng-class="{'red':$even,'green':$odd}">{{item.name}}</td>
          <td ng-class="{'red':$odd,'green':$even}">{{item.value}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

Answer 3

Answer №2

Give this a shot:

<tbody ng-repeat="info in responseData">                    
    <tr align="left" ng-if="$even">                     
        <td class="yellow">{{info.id}}</td>
        <td class="blue">{{info.first_name}}</td>
        <td>{{info.last_name}}</td>
        <td>{{info.email}}</td>                         
    </tr>
    <tr align="left" ng-if="$odd">                      
        <td class="blue">{{info.id}}</td>
        <td class="yellow">{{info.first_name}}</td>
        <td>{{info.last_name}}</td>
        <td>{{info.email}}</td>                         
    </tr>
</tbody>

<style>
    .blue {
         background-color: blue;
    }
    .yellow {
        background-color: yellow;
    }
</style>

Output similar to the image below:

Answer 4

Give this a shot:

<tbody ng-repeat="info in responseData">                    
    <tr align="left" ng-if="$even">                     
        <td class="yellow">{{info.id}}</td>
        <td class="blue">{{info.first_name}}</td>
        <td>{{info.last_name}}</td>
        <td>{{info.email}}</td>                         
    </tr>
    <tr align="left" ng-if="$odd">                      
        <td class="blue">{{info.id}}</td>
        <td class="yellow">{{info.first_name}}</td>
        <td>{{info.last_name}}</td>
        <td>{{info.email}}</td>                         
    </tr>
</tbody>

<style>
    .blue {
         background-color: blue;
    }
    .yellow {
        background-color: yellow;
    }
</style>

Output similar to the image below:

Use the CSS class

Answer №1

Answer №2

Similar questions

How can the size of the font in a <div> be adjusted based on the number of characters present?

Retain the spaces within a string in Java and JavaScript programming languages

Remove the model from operation

Customize the List Box Appearance for a Specific HTML Item (Option)

Is it possible for an Angular controller to utilize more than one $resource?

Turn off hover effect using solely CSS

Encountering the error message 'Invalid cast specified' while using SqlDataReader in MVC

Modify the parent div's background color on mouseover of the child li

Is It Best to Override Behavior in a Directive?

Using ng-click with multiple plus and minus operators in the same controller in AngularJS: A guide

Tips for incorporating property into an object using ng-model in an HTML page with AngularJS

App.jsx line 11 is throwing an error due to an undefined property 'TodoComponent'

Why does the <div> element still have an offset even though its width and height are set to 100px and padding, margin, and border are set to 0px?

Vertical Alignment of Navigation Bar in Bootstrap 4

Grid Property Equivalent to Flex-Grow

Troubleshooting a navigation problem with DNN and Bootstrap-3 specifically for mobile devices

Rendering SVG graphics on browsers for Android devices

What is the best way to show an image within a div using HTML and fetching data from an API response?

Content enclosed by directive markers

What is the best way to conceal a sticky footer using another element?