【AngularJS】単数形・複数形をいい感じに扱う

6673 ワード
CoffeeScript JavaScript Angular JavaScript テキストリンク

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版書くのすごい消耗した．

Reference

王道のコンピュータの機械は練習を試みます——高精度の大きい整数は随意に進数して換算します
あの年C言語の先生が教えてくれなかったもの(一)