Bootstrap-select, downular not working

I have this problem and hope to get some advice on how to fix it.

I moved part of my html page to partial view and loaded it via ng-view the problem is the dropdown doesn't work anymore, I managed to get the style back, but when I click on it it doesn't open. When it was not in partial view, I didn't even need to make the javascript call, which seems to be required now.

Here's my code

index.html
 <link href="resources/css/bootstrap.min.css" rel="stylesheet">
    <link href="resources/css/bootstrap-select.css" rel="stylesheet">
    <!-- Bootstrap Core CSS -->

    <script src="resources/js/jquery-2.1.1.min.js"></script>
    <script src="resources/js/jquery-1.11.0.js"></script>

    <script src="resources/js/bootstrap-select.js"></script>

    <script src="resources/library/angular.js"></script>
    <script src="resources/library/angular-route.js"></script>
    <script src="resources/js/MainController.js"></script>
    <script src="resources/js/main-app.js"></script>

    partialview.html
    -------------------
     <select class="selectpicker" multiple ng-model="selE">
                    <option ng-repeat="e in ee">{{e}}</option>
                </select>

    <script>
    $(document).ready(function () {

        $('select').selectpicker({
            style: 'btn-default',
            size: false
        });

    });

</script>   

      

Thanks in advance.

+3


source to share


2 answers


Mixing Angular + jQuery is not good practice. If you want to use any jQuery plugin you can embed it in a specific Angular directive ( official docs ).

See a working example of the selectpicker directive at this . jsFiddle

html:

<select class="selectpicker"
        multiple
        title='Choose one of the following...'>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

      

js:

angular.module('demo')
  .directive('selectpicker', function () {
    return {
      restrict: 'C',
      link: function (scope, element) {
        $(element).selectpicker({
          style: 'btn-default',
          size: false
        });
      }
    };
  });

      

Controller link

Using require: 'ngModel'

in your directive will give you ngModelController

as the 4th parameter for the function link ( see doc here ).

This way you can easily bind your controller values ​​to the directive scope.

See here. jsFiddle

Directive:

angular.module('demo')
  .directive('selectpicker', function () {
    return {
      restrict: 'C',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {
        var $el = $(element);
        $el.selectpicker({
          style: 'btn-default',
          size: false
        });
        $el.on('change', function (ee, aa) {
          ngModel.$setViewValue($el.val());
          scope.$apply();
        });
      }
    };
  });

      



Controller:

angular.module('demo')
  .controller('MainCtrl', function ($scope) {
    $scope.selected = [];
  });

      

HTML:

You have selected: {{selected | json}}
<select ng-model="selected"
        class="selectpicker"
        multiple
        title='Choose one of the following...'>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

      

Transfer options in parameter

See 3rd jsFiddle .

To pass parameters dynamically, just update your directive:

angular.module('demo')
  .directive('selectpicker', function ($timeout) {
    return {
      restrict: 'C',
      require: 'ngModel',
      replace: true,
        template: '<select multiple><option ng-repeat="opt in options">{{ opt }}</option></select>',
      scope: {
        options: '='
      },
      link: function (scope, element, attrs, ngModel) {
        var $el = $(element);
        $timeout(function () {
          $el.selectpicker({
            style: 'btn-default',
            size: false
          });
        });
        $el.on('change', function (ee, aa) {
          ngModel.$setViewValue($el.val());
          scope.$apply();
        });
      }
    };
  });

      

Then in your html:

<div ng-model="selected"
        class="selectpicker"
        options="issues"
        title='Choose one of the following...'>
</div>

      

+6


source


I have another solution to the problem.

What I did was first load my data from the back end using angularjs and inside .success

after my validation I wrote the following code:



angular.element(document).ready(function () { 
  $('select').selectpicker("destroy"); 
  $('select').selectpicker("render"); 
});

      

I tried to do it without angular.element(document).ready(function (){})

, but nothing happened. I believe the plugin methods only work inside this function.

0


source







All Articles