Add arrays support for deferred chips

dist/angular-chips.js

@@ -1,5 +1,5 @@
 (function() {
-    Chips.$inject = ["$compile", "$timeout", "DomUtil"];
+    Chips.$inject = ["$q", "$compile", "$timeout", "DomUtil"];
     ChipsController.$inject = ["$scope", "$element", "DomUtil"];
     angular.module('angular.chips', [])
         .directive('chips', Chips)
@@ -9,6 +9,10 @@
         return obj && angular.isFunction(obj.then);
     }
 
+    function isArray(obj) {
+        return Object.prototype.toString.call(obj) === '[object Array]';
+    }
+
     /*
      * update values to ngModel reference
      */
@@ -73,7 +77,7 @@
         return funStr.substr(openParenthesisIndex, closeParenthesisIndex - openParenthesisIndex);
     }
     /*@ngInject*/
-    function Chips($compile, $timeout, DomUtil) {
+    function Chips($q, $compile, $timeout, DomUtil) {
         /*@ngInject*/
         linkFun.$inject = ["scope", "iElement", "iAttrs", "ngModelCtrl", "transcludefn"];
         function linkFun(scope, iElement, iAttrs, ngModelCtrl, transcludefn) {
@@ -106,22 +110,32 @@
                 } else { updatedData = data }
 
                 if (!updatedData) {
-                  return false;
+                    return false;
                 }
 
                 if (isPromiseLike(updatedData)) {
-                    updatedData.then(function(response) {
-                        model.add(response);
-                    });
+                    updatedData = updatedData.then(function(response) {
+                        if (response == null || (isArray(response) && !response.length)) {
+                            throw data; // got no data
+                        }
+                        var arr = isArray(response) ? response : [response];
+                        var first = arr.shift(); // get first element, it will be populated to DeferChip
+                        update(arr, true); // add all other elements, if any
+                        model.add(first);
+                        return first;
+                    })
                     scope.chips.list.push(new DeferChip(data, updatedData));
                     scope.$apply();
                 } else {
                     update(updatedData);
                 }
 
-                function update(data) {
-                    scope.chips.list.push(data);
-                    model.add(data);
+                function update(data, defer) {
+                    var arr = isArray(data) ? data : [data];
+                    for (var i = 0; i < arr.length; i++) {
+                        scope.chips.list.push(defer ? new DeferChip(arr[i], $q.when(arr[i])) : arr[i]);
+                        model.add(arr[i]);
+                    }
                 }
 
                 return true;

samples/index.html

@@ -75,6 +75,31 @@ <h4>Using Promise (with list of string)</h4>
             <div> usingPromise.list = {{usingPromise.list}}</div>
         </div>
     </div>
+    <!-- Example for Using Promise, returning array (with list of string) -->
+    <!--  -->
+    <!--  -->
+    <br>
+    <h4>Using Promise, returning array (with list of string)</h4>
+    <h5>For example, type "korea" to get both Koreas at once!</h5>
+    <div ng-controller="usingPromiseStrArrayController as usingPromise">
+        <chips defer ng-model="usingPromise.list" render="usingPromise.render(data)">
+            <chip-tmpl>
+                <div class="default-chip">
+                    {{chip.defer}}
+                    <span class="glyphicon glyphicon-remove" remove-chip="usingPromise.deleteChip(data)"></span>
+                    <div class="loader-container" ng-show="chip.isLoading">
+                        <i class="fa fa-spinner fa-spin fa-lg loader"></i>
+                    </div>
+                </div>
+            </chip-tmpl>
+            <input chip-control></input>
+        </chips>
+        <!-- Printing controller value -->
+        <div class="printvalue">
+            <b>Controller:</b>
+            <div> usingPromise.list = {{usingPromise.list}}</div>
+        </div>
+    </div>
     <!-- Example for Using Promise (with list of object) -->
     <!--  -->
     <!--  -->
@@ -134,6 +159,7 @@ <h4>Using bootstrap.ui.typeahead</h4>
 <script type="text/javascript" src="basic_example.js"></script>
 <script type="text/javascript" src="custom_rendering_example.js"></script>
 <script type="text/javascript" src="using_promise_str_example.js"></script>
+<script type="text/javascript" src="using_promise_str_array_example.js"></script>
 <script type="text/javascript" src="using_promise_obj_example.js"></script>
 
 </html>

samples/using_promise_str_array_example.js

@@ -0,0 +1,65 @@
+(function() {
+    angular.module('sample')
+        .controller('usingPromiseStrArrayController', UsingPromiseStrArrayController);
+
+    function UsingPromiseStrArrayController($scope, $q) {
+        var self = this;
+
+        var countries = [
+            'Afghanistan','Albania','Algeria','Andorra','Angola','Anguilla','Antigua & Barbuda','Argentina','Armenia','Australia','Austria','Azerbaijan',
+            'Bahamas','Bahrain','Bangladesh','Barbados','Belarus','Belgium','Belize','Benin','Bermuda','Bhutan','Bolivia','Bosnia & Herzegovina','Botswana','Brazil','Brunei Darussalam','Bulgaria','Burkina Faso','Myanmar/Burma','Burundi',
+            'Cambodia','Cameroon','Canada','Cape Verde','Cayman Islands','Central African Republic','Chad','Chile','Colombia','Comoros','Congo','Costa Rica','Croatia','Cuba','Cyprus','Czech Republic',
+            'Democratic Republic of the Congo','Denmark','Djibouti','Dominican Republic','Dominica',
+            'Ecuador','Egypt','El Salvador','Equatorial Guinea','Eritrea','Estonia','Ethiopia',
+            'Fiji','Finland','France','French Guiana',
+            'Gabon','Gambia','Georgia','Germany','Ghana','Great Britain','Greece','Grenada','Guadeloupe','Guatemala','Guinea','Guinea-Bissau','Guyana',
+            'Haiti','Honduras','Hungary',
+            'Iceland','Indonesia','Iran','Iraq','Israel and the Occupied Territories','Italy','Ivory Coast (Cote d\'Ivoire)',
+            'Jamaica','Japan','Jordan',
+            'Kazakhstan','Kenya','Kosovo','Kuwait','Kyrgyz Republic (Kyrgyzstan)',
+            'Laos','Latvia','Lebanon','Lesotho','Liberia','Libya','Liechtenstein','Lithuania','Luxembourg',
+            'Republic of Macedonia','Madagascar','Malawi','Malaysia','Maldives','Mali','Malta','Martinique','Mauritania','Mauritius','Mayotte','Mexico','Moldova, Republic of','Monaco','Mongolia','Montenegro','Montserrat','Morocco','Mozambique',
+            'Namibia','Nepal','Netherlands','New Zealand','Nicaragua','Niger','Nigeria','Korea, Democratic Republic of (North Korea)','Norway',
+            'Oman',
+            'Pacific Islands','Pakistan','Panama','Papua New Guinea','Paraguay','Peru','Philippines','Poland','Portugal','Puerto Rico',
+            'Qatar',
+            'Reunion','Romania','Russian Federation','Rwanda',
+            'Saint Kitts and Nevis','Saint Lucia','Saint Vincent\'s & Grenadines','Samoa','Sao Tome and Principe','Saudi Arabia','Senegal','Serbia','Seychelles','Sierra Leone','Singapore','Slovak Republic (Slovakia)','Slovenia','Solomon Islands','Somalia','South Africa','Korea, Republic of (South Korea)','South Sudan','Spain','Sri Lanka','Sudan','Suriname','Swaziland','Sweden','Switzerland','Syria',
+            'Tajikistan','Tanzania','Thailand','Timor Leste','Togo','Trinidad & Tobago','Tunisia','Turkey','Turkmenistan','Turks & Caicos Islands',
+            'Uganda','Ukraine','United Arab Emirates','United States of America (USA)','Uruguay','Uzbekistan',
+            'Venezuela','Vietnam','Virgin Islands (UK)','Virgin Islands (US)',
+            'Yemen',
+            'Zambia','Zimbabwe'
+        ];
+
+        self.list = ['India', 'China'];
+
+        /*call back method for chip*/
+        self.render = function(val) {
+            var deferred = $q.defer();
+            setTimeout(function() {
+                var ret = []
+                for (var i = 0; i < countries.length; i++) {
+                    if (countries[i].toLowerCase().indexOf(val.toLowerCase()) !== -1) {
+                        ret.push(countries.splice(i, 1)[0]);
+                        i--;
+                    }
+                }
+                deferred.resolve(ret); // : deferred.reject(val);
+            }, getDelay());
+            return deferred.promise;
+        };
+
+        /*call back method for chip delete*/
+        self.deleteChip = function(val) {
+            if (val && val.defer && !val.isFailed) {
+                countries.push(val.defer);
+            }
+            return true;
+        }
+
+        function getDelay(){
+            return (Math.floor(Math.random() * 3) + 1) * 1000;
+        }
+    }
+})();