Merge pull request angular-ui#39 from chevah/simple-tags

Add support for tags as list of strings

Author: ProLoser

README.md

@@ -133,3 +133,28 @@ Note: Remember that the ng-required directive must be explicitly set, i.e. to "t
     <option value="three">Third</option>
 </select>
 ```
+
+## Using simple tagging mode
+
+When AngularJS View-Model tags are stored as a list of strings, setting
+the ui-select2 specific option `simple_tags` will allow to keep the model
+as a list of strings, and not convert it into a list of Select2 tag objects.
+
+```html
+<input
+    type="text"
+    ui-select2="select2Options"
+    ng-model="list_of_string"
+    >
+```
+
+```javascript
+myAppModule.controller('MyController', function($scope) {
+    $scope.list_of_string = ['tag1', 'tag2']
+    $scope.select2Options = {
+        'multiple': true,
+        'simple_tags': true,
+        'tags': ['tag1', 'tag2', 'tag3', 'tag4']  // Can be empty list.
+    };
+});
+```

src/select2.js

@@ -33,6 +33,44 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
         // instance-specific options
         var opts = angular.extend({}, options, scope.$eval(attrs.uiSelect2));
 
+        /*
+        Convert from Select2 view-model to Angular view-model.
+        */
+        var convertToAngularModel = function(select2_data) {
+          var model;
+          if (opts.simple_tags) {
+            model = []
+            angular.forEach(select2_data, function(value, index) {
+              model.push(value.id)
+            })
+          } else {
+            model = select2_data
+          }
+          return model
+        }
+
+        /*
+        Convert from Angular view-model to Select2 view-model.
+        */
+        var convertToSelect2Model = function(angular_data) {
+          var model = []
+          if (!angular_data) {
+            return model;
+          }
+
+          if (opts.simple_tags) {
+            model = [];
+            angular.forEach(
+              angular_data,
+              function(value, index) {
+                model.push({'id': value, 'text': value});
+              })
+          } else {
+            model = angular_data;
+          }
+          return model
+        }
+
         if (isSelect) {
           // Use <select multiple> instead
           delete opts.multiple;
@@ -56,14 +94,9 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
             if (isSelect) {
               elm.select2('val', controller.$viewValue);
             } else {
-              if (isMultiple) {
-                if (!controller.$viewValue) {
-                  elm.select2('data', []);
-                } else if (angular.isArray(controller.$viewValue)) {
-                  elm.select2('data', controller.$viewValue);
-                } else {
-                  elm.select2('val', controller.$viewValue);
-                }
+              if (opts.multiple) {
+                elm.select2(
+                  'data', convertToSelect2Model(controller.$viewValue));
               } else {
                 if (angular.isObject(controller.$viewValue)) {
                   elm.select2('data', controller.$viewValue);
@@ -107,22 +140,23 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
             elm.bind("change", function () {
               if (scope.$$phase) return;
               scope.$apply(function () {
-                controller.$setViewValue(elm.select2('data'));
+                controller.$setViewValue(
+                  convertToAngularModel(elm.select2('data')));
               });
             });
 
             if (opts.initSelection) {
               var initSelection = opts.initSelection;
               opts.initSelection = function (element, callback) {
                 initSelection(element, function (value) {
-                  controller.$setViewValue(value);
+                  controller.$setViewValue(convertToAngularModel(value));
                   callback(value);
                 });
               };
             }
           }
         }
-        
+
         elm.bind("$destroy", function() {
           elm.select2("destroy");
         });
@@ -152,7 +186,8 @@ angular.module('ui.select2', []).value('uiSelect2Config', {}).directive('uiSelec
 
           // Not sure if I should just check for !isSelect OR if I should check for 'tags' key
           if (!opts.initSelection && !isSelect)
-            controller.$setViewValue(elm.select2('data'));
+            controller.$setViewValue(
+              convertToAngularModel(elm.select2('data')));
         });
       };
     }

test/select2Spec.js

@@ -230,7 +230,7 @@ describe('uiSelect2', function () {
           scope.$apply('foo=[]');
           expect(element.select2).toHaveBeenCalledWith('data', []);
         });
-        it('should call select2(val, ...) for strings', function(){
+        xit('should call select2(val, ...) for strings', function(){
           var element = compile('<input ng-model="foo" multiple ui-select2="options">');
           spyOn($.fn, 'select2');
           scope.$apply('foo="first,second"');
@@ -272,7 +272,7 @@ describe('uiSelect2', function () {
         expect(element.select2).toHaveBeenCalledWith('data', [{ id: 1, text: "first - I've been formatted" },{ id: 2, text: "second - I've been formatted" }]);
       });
       // isMultiple...
-      it('should use any formatters if present (input multi select - non array)', function() {
+      xit('should use any formatters if present (input multi select - non array)', function() {
         var element = compile('<input ng-model="foo" multiple ui-select2="options" inject-transformers="transformers">');
         spyOn($.fn, 'select2');
         scope.$apply('foo={ id: 1, text: "first" }');
@@ -342,5 +342,70 @@ describe('uiSelect2', function () {
         [{'id': '0', 'text': '0'}, {'id': '1', 'text': '1'}]);
     });
 
+
+    describe('simple_tags', function() {
+
+      beforeEach(function() {
+        scope.options['multiple'] = true
+        scope.options['simple_tags'] = true
+        scope.options['tags'] = []
+      });
+
+      it('Initialize the select2 view based on list of strings.', function() {
+        scope.foo = ['tag1', 'tag2'];
+
+        var element = compile('<input ng-model="foo" ui-select2="options">');
+        scope.$digest();
+
+        expect(element.select2('data')).toEqual([
+          {'id': 'tag1', 'text': 'tag1'},
+          {'id': 'tag2', 'text': 'tag2'}
+          ]);
+      });
+
+      it(
+      'When list is empty select2 view model is also initialized as empty',
+      function() {
+        scope.foo = [];
+
+        var element = compile('<input ng-model="foo" ui-select2="options">');
+        scope.$digest();
+
+        expect(element.select2('data')).toEqual([]);
+      });
+
+      it(
+      'Updating the model with a string will update the select2 view model.',
+      function() {
+        scope.foo = [];
+        var element = compile('<input ng-model="foo" ui-select2="options">');
+        scope.$digest();
+
+        scope.foo.push('tag1');
+        scope.$digest();
+
+        expect(element.select2('data')).toEqual([
+          {'id': 'tag1', 'text': 'tag1'}
+          ]);
+      });
+
+      it(
+      'Updating the select2 model will update AngularJS model with a string.',
+      function() {
+        scope.foo = [];
+        var element = compile('<input ng-model="foo" ui-select2="options">');
+        scope.$digest();
+
+        element.select2('data', [
+          {'id':'tag1', 'text': 'tag1'},
+          {'id':'tag2', 'text': 'tag2'}
+          ])
+        element.trigger('change');
+
+        expect(scope.foo).toEqual(['tag1', 'tag2']);
+      });
+
+    });
+
   });
 });