ngClassOdd

http://docs.angularjs.org/api/ng.directive:ngClassOdd

概要
使用方法
デモ

概要

ngClassOddとngClassEvenディレクティブは、厳密にはngClassとして動作し、 ngRepeatと組み合わせて動作させることが期待されており、奇数行にだけ反映されます。

このディレクティブは、ngRepeatのスコープ内でのみ適用されます。

使用方法

<要素 ng-class-odd="{expression}">
   ...
</要素>

<要素 class="ng-class-odd: {expression};">
   ...
</要素>

引数

引数説明

ngClassOdd

引数	説明
ngClassOdd	型：`式` 評価する式を指定します。この式の結果は、空白区切りのクラス名の文字列、または配列にすることが可能です。

型：式

評価する式を指定します。この式の結果は、空白区切りのクラス名の文字列、または配列にすることが可能です。

デモ

<!doctype html>
<html ng-app>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
  </head>
  <body>
    <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
      <li ng-repeat="name in names">
       <span ng-class-odd="'odd'" ng-class-even="'even'">
         {{name}}
       </span>
      </li>
    </ol>
  </body>
</html>

.odd {
  color: red;
}
.even {
  color: blue;
}

it('should check ng-class-odd and ng-class-even', function() {
  expect(element('.doc-example-live li:first span').prop('className')).
    toMatch(/odd/);
  expect(element('.doc-example-live li:last span').prop('className')).
    toMatch(/even/);
});

<!doctype html>
<html ng-app>
  <head>
<style type="text/css">.odd {
  color: red;
}
.even {
  color: blue;
}
</style>
    <script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
  </head>
  <body>
    <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
      <li ng-repeat="name in names">
       <span ng-class-odd="'odd'" ng-class-even="'even'">
         {{name}}
       </span>
      </li>
    </ol>
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。