AngularJS basic ng-class-odd directive example

AngularJS ng-class-odd directive

AngularJS instance

Set class="striped" for odd rows of the table:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/libs//1.4.6/"></script>
<style>
.striped {
  color:white;
  background-color:black;
}
</style>
</head>
<body ng-app="myApp">

<table ng-controller="myCtrl">
<tr ng-repeat="x in records" ng-class-odd="'striped'">
 <td>{{}}</td>
 <td>{{}}</td>
</tr>
</table>

<script>
var app = ("myApp", []);
("myCtrl", function($scope) {
 $ = [
  {
   "Name" : "Alfreds Futterkiste",
   "Country" : "Germany"
  },
  {
   "Name" : "Berglunds snabbk",
   "Country" : "Sweden"
  },
  {
   "Name" : "Centro comercial Moctezuma",
   "Country" : "Mexico"
  },
  {
   "Name" : "Ernst Handel",
   "Country" : "Austria"
  }
 ]
});
</script>

</body>
</html>

Running results:

Alfreds Futterkiste	Germany
Berglunds snabbk	Sweden
Centro comercial Moctezuma	Mexico
Ernst Handel	Austria

Definition and usage

ng-class-odd Directives are used to dynamically bind one or more CSS classes to HTML elements, but only act on odd rows.

ng-class-oddDirectives need to be used with the ng-repeat directive.

ng-class-oddDirectives are recommended for table style rendering, but all HTML elements are supported.

grammar

All HTML elements are supported.

Parameter value

value	describe
expression	The expression specifies one or more CSS classes.

The above is a compilation of AngularJS information, for reference by friends in need.