feat(ngPluralize): add alternative mapping using attributes

Add an alternative way to define a mapping for ng:pluralize using
attributes instead of the `when` attribute

Closes #2454

src/ng/directive/ngPluralize.js

@@ -174,13 +174,20 @@ var ngPluralizeDirective = ['$locale', '$interpolate', function($locale, $interp
     restrict: 'EA',
     link: function(scope, element, attr) {
       var numberExp = attr.count,
-          whenExp = element.attr(attr.$attr.when), // this is because we have {{}} in attrs
+          whenExp = attr.$attr.when && element.attr(attr.$attr.when), // we have {{}} in attrs
           offset = attr.offset || 0,
-          whens = scope.$eval(whenExp),
+          whens = scope.$eval(whenExp) || {},
           whensExpFns = {},
           startSymbol = $interpolate.startSymbol(),
-          endSymbol = $interpolate.endSymbol();
+          endSymbol = $interpolate.endSymbol(),
+          isWhen = /^when(Minus)?(.+)$/;
 
+      forEach(attr, function(expression, attributeName) {
+        if (isWhen.test(attributeName)) {
+          whens[lowercase(attributeName.replace('when', '').replace('Minus', '-'))] =
+            element.attr(attr.$attr[attributeName]);
+        }
+      });
       forEach(whens, function(expression, key) {
         whensExpFns[key] =
           $interpolate(expression.replace(BRACE, startSymbol + numberExp + '-' +

test/ng/directive/ngPluralizeSpec.js

@@ -1,11 +1,13 @@
 'use strict';
 
 describe('ngPluralize', function() {
-  var element;
+  var element,
+    elementAlt;
 
 
   afterEach(function(){
     dealoc(element);
+    dealoc(elementAlt);
   });
 
 
@@ -13,10 +15,18 @@ describe('ngPluralize', function() {
     beforeEach(inject(function($rootScope, $compile) {
       element = $compile(
           '<ng:pluralize count="email"' +
-                         "when=\"{'0': 'You have no new email'," +
+                         "when=\"{'-1': 'You have negative email. Whohoo!'," +
+                                 "'0': 'You have no new email'," +
                                  "'one': 'You have one new email'," +
                                  "'other': 'You have {} new emails'}\">" +
           '</ng:pluralize>')($rootScope);
+      elementAlt = $compile(
+          '<ng:pluralize count="email" ' +
+                         "when-minus-1='You have negative email. Whohoo!' " +
+                         "when-0='You have no new email' " +
+                         "when-one='You have one new email' " +
+                         "when-other='You have {} new emails'>" +
+          '</ng:pluralize>')($rootScope);
     }));
 
 
@@ -24,38 +34,52 @@ describe('ngPluralize', function() {
       $rootScope.email = 0;
       $rootScope.$digest();
       expect(element.text()).toBe('You have no new email');
+      expect(elementAlt.text()).toBe('You have no new email');
 
       $rootScope.email = '0';
       $rootScope.$digest();
       expect(element.text()).toBe('You have no new email');
+      expect(elementAlt.text()).toBe('You have no new email');
 
       $rootScope.email = 1;
       $rootScope.$digest();
       expect(element.text()).toBe('You have one new email');
+      expect(elementAlt.text()).toBe('You have one new email');
 
       $rootScope.email = 0.01;
       $rootScope.$digest();
       expect(element.text()).toBe('You have 0.01 new emails');
+      expect(elementAlt.text()).toBe('You have 0.01 new emails');
 
       $rootScope.email = '0.1';
       $rootScope.$digest();
       expect(element.text()).toBe('You have 0.1 new emails');
+      expect(elementAlt.text()).toBe('You have 0.1 new emails');
 
       $rootScope.email = 2;
       $rootScope.$digest();
       expect(element.text()).toBe('You have 2 new emails');
+      expect(elementAlt.text()).toBe('You have 2 new emails');
 
       $rootScope.email = -0.1;
       $rootScope.$digest();
       expect(element.text()).toBe('You have -0.1 new emails');
+      expect(elementAlt.text()).toBe('You have -0.1 new emails');
 
       $rootScope.email = '-0.01';
       $rootScope.$digest();
       expect(element.text()).toBe('You have -0.01 new emails');
+      expect(elementAlt.text()).toBe('You have -0.01 new emails');
 
       $rootScope.email = -2;
       $rootScope.$digest();
       expect(element.text()).toBe('You have -2 new emails');
+      expect(elementAlt.text()).toBe('You have -2 new emails');
+
+      $rootScope.email = -1;
+      $rootScope.$digest();
+      expect(element.text()).toBe('You have negative email. Whohoo!');
+      expect(elementAlt.text()).toBe('You have negative email. Whohoo!');
     }));
 
 
@@ -63,38 +87,47 @@ describe('ngPluralize', function() {
       $rootScope.email = '';
       $rootScope.$digest();
       expect(element.text()).toBe('');
+      expect(elementAlt.text()).toBe('');
 
       $rootScope.email = null;
       $rootScope.$digest();
       expect(element.text()).toBe('');
+      expect(elementAlt.text()).toBe('');
 
       $rootScope.email = undefined;
       $rootScope.$digest();
       expect(element.text()).toBe('');
+      expect(elementAlt.text()).toBe('');
 
       $rootScope.email = 'a3';
       $rootScope.$digest();
       expect(element.text()).toBe('');
+      expect(elementAlt.text()).toBe('');
 
       $rootScope.email = '011';
       $rootScope.$digest();
       expect(element.text()).toBe('You have 11 new emails');
+      expect(elementAlt.text()).toBe('You have 11 new emails');
 
       $rootScope.email = '-011';
       $rootScope.$digest();
       expect(element.text()).toBe('You have -11 new emails');
+      expect(elementAlt.text()).toBe('You have -11 new emails');
 
       $rootScope.email = '1fff';
       $rootScope.$digest();
       expect(element.text()).toBe('You have one new email');
+      expect(elementAlt.text()).toBe('You have one new email');
 
       $rootScope.email = '0aa22';
       $rootScope.$digest();
       expect(element.text()).toBe('You have no new email');
+      expect(elementAlt.text()).toBe('You have no new email');
 
       $rootScope.email = '000001';
       $rootScope.$digest();
       expect(element.text()).toBe('You have one new email');
+      expect(elementAlt.text()).toBe('You have one new email');
     }));
   });
 
@@ -117,35 +150,48 @@ describe('ngPluralize', function() {
   describe('deal with pluralized strings with offset', function() {
     it('should show single/plural strings with offset', inject(function($rootScope, $compile) {
       element = $compile(
-        "<ng:pluralize count=\"viewCount\"  offset=2 " +
+        "<ng:pluralize count='viewCount'  offset='2' " +
             "when=\"{'0': 'Nobody is viewing.'," +
                     "'1': '{{p1}} is viewing.'," +
                     "'2': '{{p1}} and {{p2}} are viewing.'," +
                     "'one': '{{p1}}, {{p2}} and one other person are viewing.'," +
                     "'other': '{{p1}}, {{p2}} and {} other people are viewing.'}\">" +
         "</ng:pluralize>")($rootScope);
+      elementAlt = $compile(
+        "<ng:pluralize count='viewCount'  offset='2' " +
+            "when-0='Nobody is viewing.'" +
+            "when-1='{{p1}} is viewing.'" +
+            "when-2='{{p1}} and {{p2}} are viewing.'" +
+            "when-one='{{p1}}, {{p2}} and one other person are viewing.'" +
+            "when-other='{{p1}}, {{p2}} and {} other people are viewing.'>" +
+        "</ng:pluralize>")($rootScope);
       $rootScope.p1 = 'Igor';
       $rootScope.p2 = 'Misko';
 
       $rootScope.viewCount = 0;
       $rootScope.$digest();
       expect(element.text()).toBe('Nobody is viewing.');
+      expect(elementAlt.text()).toBe('Nobody is viewing.');
 
       $rootScope.viewCount = 1;
       $rootScope.$digest();
       expect(element.text()).toBe('Igor is viewing.');
+      expect(elementAlt.text()).toBe('Igor is viewing.');
 
       $rootScope.viewCount = 2;
       $rootScope.$digest();
       expect(element.text()).toBe('Igor and Misko are viewing.');
+      expect(elementAlt.text()).toBe('Igor and Misko are viewing.');
 
       $rootScope.viewCount = 3;
       $rootScope.$digest();
       expect(element.text()).toBe('Igor, Misko and one other person are viewing.');
+      expect(elementAlt.text()).toBe('Igor, Misko and one other person are viewing.');
 
       $rootScope.viewCount = 4;
       $rootScope.$digest();
       expect(element.text()).toBe('Igor, Misko and 2 other people are viewing.');
+      expect(elementAlt.text()).toBe('Igor, Misko and 2 other people are viewing.');
     }));
   });
 
@@ -165,23 +211,34 @@ describe('ngPluralize', function() {
                       "'one': '[[p1%% and one other person are viewing.'," +
                       "'other': '[[p1%% and {} other people are viewing.'}\">" +
             "</ng:pluralize>")($rootScope);
+        elementAlt = $compile(
+            "<ng:pluralize count='viewCount' offset='1'" +
+              "when-0='Nobody is viewing.'" +
+              "when-1='[[p1%% is viewing.'" +
+              "when-one='[[p1%% and one other person are viewing.'" +
+              "when-other='[[p1%% and {} other people are viewing.'>" +
+            "</ng:pluralize>")($rootScope);
         $rootScope.p1 = 'Igor';
 
         $rootScope.viewCount = 0;
         $rootScope.$digest();
         expect(element.text()).toBe('Nobody is viewing.');
+        expect(elementAlt.text()).toBe('Nobody is viewing.');
 
         $rootScope.viewCount = 1;
         $rootScope.$digest();
         expect(element.text()).toBe('Igor is viewing.');
+        expect(elementAlt.text()).toBe('Igor is viewing.');
 
         $rootScope.viewCount = 2;
         $rootScope.$digest();
         expect(element.text()).toBe('Igor and one other person are viewing.');
+        expect(elementAlt.text()).toBe('Igor and one other person are viewing.');
 
         $rootScope.viewCount = 3;
         $rootScope.$digest();
         expect(element.text()).toBe('Igor and 2 other people are viewing.');
+        expect(elementAlt.text()).toBe('Igor and 2 other people are viewing.');
       });
     })
   });