fixed select with ng:format

select (one/multiple) could not chose from a list of objects, since DOM requires string ids.
Solved by adding index formatter, which exposed incorrect handling of formatters in select
widgets.

2 files changed, 100 insertions, 73 deletions

diff --git a/docs/spec/ngdocSpec.js b/docs/spec/ngdocSpec.js
index 63be610b..63981e90 100644
--- a/docs/spec/ngdocSpec.js
+++ b/docs/spec/ngdocSpec.js
@@ -1,4 +1,5 @@
 var ngdoc = require('ngdoc.js');
+var DOM = require('dom.js').DOM;
 
 describe('ngdoc', function(){
   var Doc = ngdoc.Doc;
@@ -253,5 +254,67 @@ describe('ngdoc', function(){
       });
     });
   });
+  
+  describe('usage', function(){
+    var dom;
+    
+    beforeEach(function(){
+      dom = new DOM();
+      this.addMatchers({
+        toContain: function(text) { 
+          this.actual = this.actual.toString();
+          return this.actual.indexOf(text) > -1; 
+        }
+      });
+    });
+    
+    describe('filter', function(){
+      it('should format', function(){
+        var doc = new Doc({
+          ngdoc:'formatter',
+          shortName:'myFilter',
+          param: [
+            {name:'a'},
+            {name:'b'}
+          ]
+        });
+        doc.html_usage_filter(dom);
+        expect(dom).toContain('myFilter_expression | myFilter:b');
+        expect(dom).toContain('angular.filter.myFilter(a, b)');
+      });
+    });
+    
+    describe('validator', function(){
+      it('should format', function(){
+        var doc = new Doc({
+          ngdoc:'validator',
+          shortName:'myValidator',
+          param: [
+            {name:'a'},
+            {name:'b'}
+          ]
+        });
+        doc.html_usage_validator(dom);
+        expect(dom).toContain('ng:validate="myValidator:b"');
+        expect(dom).toContain('angular.validator.myValidator(a, b)');
+      });
+    });
+    
+    describe('formatter', function(){
+      it('should format', function(){
+        var doc = new Doc({
+          ngdoc:'formatter',
+          shortName:'myFormatter',
+          param: [
+            {name:'a'},
+          ]
+        });
+        doc.html_usage_formatter(dom);
+        expect(dom).toContain('ng:format="myFormatter:a"');
+        expect(dom).toContain('var userInputString = angular.formatter.myFormatter.format(modelValue, a);');
+        expect(dom).toContain('var modelValue = angular.formatter.myFormatter.parse(userInputString, a);');
+      });
+    });
+  });
 
 });
diff --git a/docs/src/ngdoc.js b/docs/src/ngdoc.js
index ac7d0bb1..cae24cc3 100644
--- a/docs/src/ngdoc.js
+++ b/docs/src/ngdoc.js
@@ -231,15 +231,7 @@ Doc.prototype = {
       dom.code(function(){
         dom.text(self.name);
         dom.text('(');
-        var first = true;
-        (self.param || []).forEach(function(param){
-          if (first) {
-            first = false;
-          } else {
-            dom.text(', ');
-          }
-          dom.text(param.name);
-        });
+        self.parameters(dom, ', ');
         dom.text(');');
       });
       
@@ -273,44 +265,17 @@ Doc.prototype = {
           dom.text(self.shortName);
           dom.text('_expression | ');
           dom.text(self.shortName);
-          var first = true;
-          (self.param||[]).forEach(function(param){
-            if (first) {
-              first = false;
-            } else {
-              if (param.optional) {
-                dom.tag('i', function(){
-                  dom.text('[:' + param.name + ']');
-                });
-              } else {
-                dom.text(':' + param.name);
-              }
-            }
-          });
+          self.parameters(dom, ':', true);
           dom.text(' }}');
         });
       });
       
-      dom.h3('In JavaScript', function(){
+      dom.h('In JavaScript', function(){
         dom.tag('code', function(){
           dom.text('angular.filter.');
           dom.text(self.shortName);
           dom.text('(');
-          var first = true;
-          (self.param||[]).forEach(function(param){
-            if (first) {
-              first = false;
-              dom.text(param.name);
-            } else {
-              if (param.optional) {
-                dom.tag('i', function(){
-                  dom.text('[, ' + param.name + ']');
-                });
-              } else {
-                dom.text(', ' + param.name);
-              }
-            }
-          });
+          self.parameters(dom, ', ');
           dom.text(')');
         });
       });
@@ -319,32 +284,40 @@ Doc.prototype = {
       self.html_usage_returns(dom);
     });
   },
-    
+  
   html_usage_formatter: function(dom){
     var self = this;
     dom.h('Usage', function(){
       dom.h('In HTML Template Binding', function(){
         dom.code(function(){
-          dom.text('<input type="text" ng:format="');
+          if (self.inputType=='select')
+            dom.text('<select name="bindExpression"');
+          else
+            dom.text('<input type="text" name="bindExpression"');
+          dom.text(' ng:format="');
           dom.text(self.shortName);
+          self.parameters(dom, ':', false, true);
           dom.text('">');
         });
       });
       
-      dom.h3('In JavaScript', function(){
+      dom.h('In JavaScript', function(){
         dom.code(function(){
           dom.text('var userInputString = angular.formatter.');
           dom.text(self.shortName);
-          dom.text('.format(modelValue);');
-        });
-        dom.html('<br/>');
-        dom.code(function(){
+          dom.text('.format(modelValue');
+          self.parameters(dom, ', ', false, true);
+          dom.text(');');
+          dom.text('\n');
           dom.text('var modelValue = angular.formatter.');
           dom.text(self.shortName);
-          dom.text('.parse(userInputString);');
+          dom.text('.parse(userInputString');
+          self.parameters(dom, ', ', false, true);
+          dom.text(');');
         });
       });
       
+      self.html_usage_parameters(dom);
       self.html_usage_returns(dom);  
     });
   },
@@ -356,18 +329,7 @@ Doc.prototype = {
         dom.code(function(){
           dom.text('<input type="text" ng:validate="');
           dom.text(self.shortName);
-          var first = true;
-          (self.param||[]).forEach(function(param){
-            if (first) {
-              first = false;
-            } else {
-              if (param.optional) {
-                dom.text('[:' + param.name + ']');
-              } else {
-                dom.text(':' + param.name);
-              }
-            }
-          });
+          self.parameters(dom, ':', true);
           dom.text('"/>');
         });
       });
@@ -377,19 +339,7 @@ Doc.prototype = {
           dom.text('angular.validator.');
           dom.text(self.shortName);
           dom.text('(');
-          var first = true;
-          (self.param||[]).forEach(function(param){
-            if (first) {
-              first = false;
-              dom.text(param.name);
-            } else {
-              if (param.optional) {
-                dom.text('[, ' + param.name + ']');
-              } else {
-                dom.text(', ' + param.name);
-              }
-            }
-          });
+          self.parameters(dom, ', ');
           dom.text(')');
         });
       });
@@ -443,8 +393,22 @@ Doc.prototype = {
   },
     
   html_usage_service: function(dom){
-  }
+  },
 
+  parameters: function(dom, separator, skipFirst, prefix) {
+    var sep = prefix ? separator : '';
+    (this.param||[]).forEach(function(param, i){
+      if (!(skipFirst && i==0)) {
+        if (param.optional) {
+          dom.text('[' + sep + param.name + ']');
+        } else {
+          dom.text(sep + param.name);
+        }
+      }
+      sep = separator;
+    });
+  }
+    
 };
 //////////////////////////////////////////////////////////