WHAT
たとえば，下記のようなメッセージの出し分けがしたい．
- 0いいねのとき →
0 Likes - 1いいねのとき →
1 Like - 2いいねのとき →
2 Likes
ng-pluralizeを利用する．
Example
細かい仕様は公式docを参照されたい．
Template
test.html
<button ng-click="ctrl.increment()">
<ng-pluralize count="ctrl.count" when="ctrl.messages">
</button>
-
ctrl.count: クリック数が格納されている． -
ctrl.messages:count属性で指定した変数の値ごとにどんなメッセージを出すかが，オブジェクトで定義されている（template内に直接書くのもOK，書籍や公式docはそうしてる）．
Directive
本稿ではDirectiveとして定義してある（深い意味は無い）．
in CoffeeScript
test.coffee
class TestController
messages:
'0': 'Not yet clicked'
'1': '1 click!'
'other': '{} clicks!'
count: 0
increment: =>
@count++
class TestDirective
restrict: 'E'
controller: TestController
controllerAs: 'ctrl'
templateUrl: 'test.html'
angular.module('testApp', [])
.directive('test', -> new TestDirective())
in JavaScript
CoffeeScript読めない人向け．
test.js
angular.module('testApp', [])
.directive('test', function() {
return {
restrict: 'E',
controller: function () {
this.messages = {
'0': 'Not yet clicked',
'1': '1 click!',
'other': '{} clicks!'
};
this.count = 0;
this.increment = (function (_this) {
return function () {
_this.count++;
}
}(this));
},
controllerAs: 'ctrl',
templateUrl: 'test.html'
};
});
JavaScript版書くのすごい消耗した．