<h1>Example: ngPluralize</h1>
<p>ngPluralizeは数値によって表示を切り替えるディレクティブです。</p>
<div ng-app>
  <input type="number" ng-model="myCount" ng-init="myCount=0">
  <div ng-pluralize
    count="myCount"
    when="{
      '0': '数を入力してください',
      '1': '1個',
      '2': '2個',
      'other': '{}個'
    }"
  ></div>
  
  <input type="text"
         ng-list 
         ng-model="list"
         ng-init="list=['A', 'B', 'C']"
         >
  <div ng-pluralize
    count="list.length"
    when="{
      '0': '未読',
      '1': '{{ list[0] }}さんが既読',
      '2': '{{ list[0] }}さんと{{ list[1] }}さんが既読',
      'one': '{{ list[0] }}さんと{{ list[1] }}さんともう1人が既読',
      'other': '{{ list[0] }}さんと{{ list[1] }}さんとその他{}人以上が既読'
    }"
  ></div>
</div>
@import "bourbon";

body {
  padding: 1.5rem;
}
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