Selectpicker doesn't fill when using with AngularJS

Question

I'm trying to fill a select options (selectpicker), but without success. My competenceArray is filled correctly, but in my HTML never appears the options.

Someone can help me with the selectpicker ?

JS

(() => {
  angular
    .module('talent')
    .controller('FunctionalityCreateCtrl', Create);

  function Create($timeout, GatewayService) {
    const vm = this;
    vm.form = {};
    vm.competencesArray = [];

    getCompetences();

    function getCompetences() {
      GatewayService.get('/competences')
        .then((data) => {
          vm.competencesArray = data._embedded;
        })
        .catch(() => {
          console.log('nope');
        });
    }
  }
})();

HTML

<select 
   class="selectpicker"                     
   data-style="select-with-transition" 
   title="Select a value" 
   data-size="7" 
   ng-model="functionality.form.comp"
   ng-options="s.name for s in functionality.competencesArray">
 <option value=""> Select</option>                      
 <select>

Akashii · Accepted Answer · 2017-10-24 02:33:16Z

3

You should refresh select picker after complete ajax request . From the docs :

To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

When complete ajax request , you need refresh select , and put it in $timeout for angular re-render dom . Here is example :

function getCompetences() {
  GatewayService.get('/competences')
    .then((data) => {
      vm.competencesArray = data._embedded;
    $timeout(function(){
     $('.selectpicker').selectpicker('refresh'); //put it in timeout for run digest cycle
    },1)
    })
    .catch(() => {
      console.log('nope');
    });
}

Hope it help

edited Oct 24, 2017 at 2:33

answered Oct 24, 2017 at 2:27

Akashii

2,2815 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MJL · Accepted Answer · 2017-10-24 01:36:42Z

You haven't posted the full context of your code so I'm assuming that you have defined the angular module "talent" and that the element is within the scope of the FunctionalityCreateCtrl. I have wrapped your example HTML in a div with ng-app and ng-controller attributes just so the example is functional.

The first error I see in the code example you posted is the element is not closed properly. The close tag is missing a forward slash: </select>.

The other error is you are setting the model of the select element to be form.comp but form.comp doesn't seem to be set to anything. I've added it in the code example below.

Also notice that I've added an id to the ng-options expression ng-options="s.id as s.name for s in functionality.competencesArray"> This is just so I can set the model (form.comp) to a value I know. Your data may be different.

Working html snippet:

<div ng-app="talent" ng-controller="FunctionalityCreateCtrl as functionality">
  <select 
     class="selectpicker"                     
     data-style="select-with-transition" 
     title="Select a value" 
     data-size="7" 
     ng-model="functionality.form.comp"
     ng-options="s.id as s.name for s in functionality.competencesArray">
   <option value=""> Select</option>                      
   </select>
</div>

Working Javascript snippet (I've added the talent module definition and removed the api call just so the example is functional):

(() => {
  angular.module('talent', []);

  angular
    .module('talent')
    .controller('FunctionalityCreateCtrl', Create);

  function Create() {
    const vm = this;
    vm.form = {};
    vm.competencesArray = [];

    getCompetences();

    function getCompetences() {
      vm.competencesArray = [
        { id: 1, name: 'test 1' },
        { id: 2, name: 'test 2' },
        { id: 3, name: 'test 3' }
      ];

      vm.form.comp = 1;
    }
  }
})();

Here is a working JSFiddle using your example code: https://jsfiddle.net/g8r9ajtL/

Collectives™ on Stack Overflow

Selectpicker doesn't fill when using with AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related