AngularJSを使って一覧表示をする時

AngularJSを使ってRailsからデータを取得する方法を前回書きましたが、今回は取得したデータを一覧表示する場合に、奇数行、偶数行で背景色を変える方法を書きます。

とは言え、凄く簡単で以下のようにします。

       <li ng-repeat="event in events" ng-class-even="'evenbg'" ng-class-odd="'oddbg'">
       {{event.title}} {{event.start}} から {{event.end}} |&nbsp;&nbsp;<a href='/events/{{event.id}}' >詳細</a> &nbsp;&nbsp;
      </li>

ng-class-even、ng-class-oddをでcssを指定すれば、奇数行、偶数行それぞれに適用されます。