AngularJS ng-class-odd Directive

The AngularJS ng-class-odd directive is similar to ng-class directive. It is work in conjunction with ng-repeat and take effect only on odd rows.

Syntax

<span ng-class-odd="'odd'" ng-class-even="'even'">
<input type="radio" ng-model="favorite.color" 
ng-value="name" id="{{name}}" name="color"> 
{{name}}<br/>
</span>

AngularJS ng-class-odd Directive Example

<!DOCTYPE html>    
<html>    
<head> <!-- www.techstrikers.com -->    
<title>ngClassOdd Test Sample</title> 
  <style>
    .odd {
  color: black;
  }
  .even {
    color: red;
  }
  </style>
    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>    
    
<script>    
  var app = angular.module('OddExample', [])
    app.controller('OddController', ['$scope', function($scope) {
      $scope.names = ['Red', 'Blue', 'Green','Yellow','White','Black'];
      $scope.favorite = { color: 'Green' };
    }]);  
</script>    
</head>    
<body style="background-color:#DDE4E9;" ng-app="OddExample">    
  <fieldset style="background-color:#DDE4E9;">      
    <legend>AngulerJS ngClassOdd Example</legend>      
<div ng-controller="OddController">
  <form name="myform">
    <label ng-repeat="name in names" for="{{name}}">
      <span ng-class-odd="'odd'" ng-class-even="'even'">
       <input type="radio" ng-model="favorite.color" ng-value="name"
              id="{{name}}" name="color"> {{name}}<br/>
          </span>
     </label>
  </form>
</div>
 </fieldset>     
</body>    
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-class-odd Directive

AngularJS ng-class-odd Directive Example

Recent Articles