Directive is duplicating the dropdown boxes in a ng-table column about angular-bootstrap-select

[hmonadjem]

having the same effect ... in my case its even not in an table :/

[felipegr]

@hmonadjem If it helps you, I managed to add some code to the directive that "corrects" this behavior. I don't believe it's a proper correction, but anyway, it works. I saw there was a difference between the two dropdowns created, the one which worked had the classes ".btn-group.bootstrap-select.ng-pristine.ng-untouched.ng-valid" in it and the duplicate hadn't, so what I did was to remove the wrong one.

Here's the code, I hope it is useful for you:

// Added $timeout
angular.module('angular-bootstrap-select', [])
  .directive('selectpicker', ['$parse', '$timeout', function ($parse, $timeout) {
    return {
      restrict: 'A',
      require: '?ngModel',
      priority: 10,
      compile: function (tElement, tAttrs, transclude) {
        tElement.selectpicker($parse(tAttrs.selectpicker)());
        tElement.selectpicker('refresh');
        return function (scope, element, attrs, ngModel) {
          if (!ngModel) return;

          scope.$watch(attrs.ngModel, function (newVal, oldVal) {
            scope.$evalAsync(function () {
              if (!attrs.ngOptions || /track by/.test(attrs.ngOptions)) element.val(newVal);
                element.selectpicker('refresh');
            });
          });

          ngModel.$render = function () {
            scope.$evalAsync(function () {
              element.selectpicker('refresh');
            });
          }

          // New code, removes the divs that don't have all the necessary classes
          $timeout(function () {
            if ($( 'div' ).find('.btn-group.bootstrap-select.ng-pristine.ng-untouched.ng-valid').length > 0 ) {
              $('.bootstrap-select:not(.ng-pristine.ng-untouched.ng-valid)').remove();
            }
          });
        };
      }

    };
  }]);

[hmonadjem]

Hi, thank you, i figured out that it happens when the selectpicker is in an
ng-if ...

Am Montag, 21. September 2015 schrieb felipegr :

@hmonadjem https://github.com/hmonadjem If it helps you, I managed to
add some code to the directive that "corrects" this behavior. I don't
believe it's a proper correction, but anyway, it works. I saw there was a
difference between the two dropdowns created, the one which worked had the
classes ".btn-group.bootstrap-select.ng-pristine.ng-untouched.ng-valid" in
it and the duplicate hadn't, so what I did was to remove the wrong one.

Here's the code, I hope it is useful for you:

// Added $timeout
angular.module('angular-bootstrap-select', [])
.directive('selectpicker', ['$parse', '$timeout', function ($parse, $timeout) {
return {
restrict: 'A',
require: '?ngModel',
priority: 10,
compile: function (tElement, tAttrs, transclude) {
tElement.selectpicker($parse(tAttrs.selectpicker)());
tElement.selectpicker('refresh');
return function (scope, element, attrs, ngModel) {
if (!ngModel) return;

      scope.$watch(attrs.ngModel, function (newVal, oldVal) {
        scope.$evalAsync(function () {
          if (!attrs.ngOptions || /track by/.test(attrs.ngOptions)) element.val(newVal);
            element.selectpicker('refresh');
        });
      });

      ngModel.$render = function () {
        scope.$evalAsync(function () {
          element.selectpicker('refresh');
        });
      }

      // New code, removes the divs that don't have all the necessary classes
      $timeout(function () {
        if ($( 'div' ).find('.btn-group.bootstrap-select.ng-pristine.ng-untouched.ng-valid').length > 0 ) {
          $('.bootstrap-select:not(.ng-pristine.ng-untouched.ng-valid)').remove();
        }
      });
    };
  }

};

}]);

—
Reply to this email directly or view it on GitHub
#49 (comment)
.

von mobil gesendet

[fthiemonge]

We are having the same issue, but only with the minified js.

[zdolin]

+1

[StefanOrzu]

@hmonadjem is right. It happened to me when the select was nested inside an ng-if or ng-switch-when. I worked around it by placing the conditional directly on the select.
It's not a nice solution, but at least it got the job done. A real fix is still necessary for this bug.

[KevinHoward]

#57 <-- Here is the real fix. Thanks @xixao!

hey any one know how to give select filter in ng-table column i saw the doc but i cant understand any one have complete code