<h1>Example: ngClass</h1>
<p>ngClassは動的にClassを操作します。</p>
<div ng-app>
  <ul ng-class="'c-list'">
    <li ng-class="'list-item s-current'">Apple</li>
    <li ng-class="['list-item', 's-current']">Orange</li>
    <li ng-class="{'list-item': true, 's-current': false}">Lemon</li>
  </ul>
  
  <h2>動的な変更</h2>
  <p ng-class="{'color-red': colorRed, 'weight-bold': weightBold}">Target Text</p>
  <ul>
    <li>
      <input type="checkbox" id="colorRed" ng-model="colorRed" />
      <label for="colorRed">Color: Red</label>
    </li>
    <li>
      <input type="checkbox" id="weightBold" ng-model="weightBold" />
      <label for="weightBold">Font weight: Bold</label>
    </li>
  </ul>
  
</div>
@import "bourbon";

body {
  padding: 1.5rem;
}

.c-list {
  
  .list-item {
   
    &.s-current {
      font-weight: bold;
    }
  }
}

.color-red {
  color: red;
}

.weight-bold {
  font-weight: bold;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js