added track by

Author: joaoneto

Diff for: demo/index.html

@@ -62,7 +62,7 @@ <h1>Angular bootstrap-select</h1>
                         <option value="">Select one</option>
                     </select>
 
-                    <select name="field4" toggle ng-model="formData.color.name" selectpicker class="" ng-options="color.name as color.name for color in colors">
+                    <select name="field4" toggle ng-model="formData.color.name" selectpicker class="" ng-options="color.name as color.name for color in colors track by color.name">
                         <option value="">Select one</option>
                     </select>
 

Diff for: demo/selectDemo.js

@@ -4,7 +4,7 @@ function SelectCtrl($scope, $timeout) {
   $scope.formData = {};
   $scope.formData.color = { name: 'Green' };
 
-  $scope.colors = [{ name: 'Red' }, { name: 'Green' }, { name: 'Blue' }];
+  $scope.colors = [{ id: 1, name: 'Red' }, { id: 2, name: 'Green' }, { id: 3, name: 'Blue' }];
 
   $scope.submit = function () {
     $scope.form1.$setPristine();

Diff for: src/angular-bootstrap-select.js

@@ -10,52 +10,48 @@ angular.module('angular-bootstrap-select.extra', [])
         }
 
         var target = element.parent();
-        var toggleFn = function (e) {
+        var toggleFn = function () {
           target.toggleClass('open');
-          e.stopPropagation();
+        };
+        var hideFn = function () {
+          target.removeClass('open');
         };
 
-        element.bind('click', toggleFn);
-        element.next().find('li').bind('click', toggleFn);
+        element.on('click', toggleFn);
+        element.next().on('click', hideFn);
 
         scope.$on('$destroy', function () {
-          console.log('lalal');
-          element.unbind('click', toggleFn);
+          element.off('click', toggleFn);
+          element.next().off('click', hideFn);
         });
       }
     };
   });
 
 angular.module('angular-bootstrap-select', [])
-.directive('selectpicker', ['$timeout', '$parse', function ($timeout, $parse) {
+  .directive('selectpicker', ['$parse', function ($parse) {
     return {
       restrict: 'A',
       require: '?ngModel',
       priority: 10,
       compile: function (tElement, tAttrs, transclude) {
         tElement.selectpicker($parse(tAttrs.selectpicker)());
-        // tElement.selectpicker('refresh');
+        tElement.selectpicker('refresh');
         return function (scope, element, attrs, ngModel) {
           if (!ngModel) return;
 
           scope.$watch(attrs.ngModel, function (newVal, oldVal) {
             scope.$evalAsync(function () {
-              if (newVal !== oldVal) {
-                console.log('watch --->', newVal, oldVal)
-                if (!attrs.ngOptions) element.val(newVal);
-                element.selectpicker('refresh');
-              }
+              if (!attrs.ngOptions || /track by/.test(attrs.ngOptions)) element.val(newVal);
+              element.selectpicker('refresh');
             });
           });
 
           ngModel.$render = function () {
             scope.$evalAsync(function () {
-              console.log('render --->', element.val());
               element.selectpicker('refresh');
             });
           }
-
-          // element.selectpicker('refresh');
         };
       }
 

Diff for: test/select.js

@@ -15,34 +15,72 @@ describe('selectpicker', function() {
   });
 
   it('should set to selectpicker element value the scope value', function() {
-    return inject(function ($compile, $rootScope, $timeout) {
+    return inject(function ($compile, $rootScope) {
       var scope = $rootScope.$new();
       var html = '<select selectpicker ng-model="selected" class="">' +
                     '<option>Mustard</option>' +
                     '<option>Ketchup</option>' +
                     '<option>Relish</option>' +
                   '</select>';
       var element = $compile(html)(scope);
+      scope.$digest();
       scope.$apply(function () {
         scope.selected = 'Ketchup';
       });
-      $timeout.flush();
       expect(element.val()).toEqual('Ketchup');
     });
   });
 
-  it('should set selectpicker select element options with ng-options', function() {
-    return inject(function ($compile, $rootScope, $timeout) {
+  it('should set selectpicker selected option element, changing the model value', function() {
+    return inject(function ($compile, $rootScope) {
       var scope = $rootScope.$new();
-      scope.colors = [{ name: 'Red' }, { name: 'Green' }, { name: 'Blue' }];
-      var html = '<select selectpicker ng-model="selected" ng-options="color.name for color in colors"></select>';
+      scope.colors = [{ id: 10, name: 'Red' }, { id: 20, name: 'Green' }, { id: 30, name: 'Blue' }];
+      var html = '<select selectpicker ng-model="selected" ng-options="c.name as c.name for c in colors"></select>';
       var element = $compile(html)(scope);
+      scope.$digest();
       scope.$apply(function () {
-        scope.selected = 1;
+        scope.selected = 'Green';
       });
-      $timeout.flush();
       expect(element.val()).toEqual('1');
     });
   });
+
+  it('should set selectpicker selected option element, changing the model value with options tracked by name', function() {
+    return inject(function ($compile, $rootScope) {
+      var scope = $rootScope.$new();
+      scope.colors = [{ id: 10, name: 'Red' }, { id: 20, name: 'Green' }, { id: 30, name: 'Blue' }];
+      var html = '<select selectpicker ng-model="selected" ng-options="c.name as c.name for c in colors track by c.name"></select>';
+      var element = $compile(html)(scope);
+      scope.$digest();
+      scope.$apply(function () {
+        scope.selected = 'Green';
+      });
+      expect(element.val()).toEqual('Green');
+    });
+  });
+
+  it('should set model value, changing selectpicker selected element tracked by id', function() {
+    return inject(function ($compile, $rootScope) {
+      var scope = $rootScope.$new();
+      scope.colors = [{ id: 10, name: 'Red' }, { id: 20, name: 'Green' }, { id: 30, name: 'Blue' }];
+      var html = '<select selectpicker ng-model="selected" ng-options="c.name as c.name for c in colors track by c.id"></select>';
+      var element = $compile(html)(scope);
+      scope.$digest();
+      element.selectpicker('val', '20');
+      expect(scope.selected).toEqual('Green');
+    });
+  });
+
+  it('should set model value, changing selectpicker selected element tracked by name', function() {
+    return inject(function ($compile, $rootScope) {
+      var scope = $rootScope.$new();
+      scope.colors = [{ id: 10, name: 'Red' }, { id: 20, name: 'Green' }, { id: 30, name: 'Blue' }];
+      var html = '<select selectpicker ng-model="selected" ng-options="c.name as c.name for c in colors track by c.name"></select>';
+      var element = $compile(html)(scope);
+      scope.$digest();
+      element.selectpicker('val', 'Green');
+      expect(scope.selected).toEqual('Green');
+    });
+  });
 
 });