Выбор выбора не заполняется при использовании с AngularJS

Question

Я пытаюсь заполнить выбранные параметры (selectpicker), но безуспешно. Мой компетенция Array заполнена правильно, но в моем HTML никогда не появляются параметры.

Кто-то может мне помочь с выбором пикапа?

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>

Answer 1

После завершения запроса AJAX вы должны обновить селектор выбора. Из документов:

Чтобы программно обновить выбор с помощью JavaScript, сначала измените выбор, а затем используйте метод обновления, чтобы обновить пользовательский интерфейс в соответствии с новым состоянием. Это необходимо при удалении или добавлении параметров или при отключении / включении выбора с помощью JavaScript.

Когда закончите ajax-запрос, вам нужно обновить select и поместить его в $ timeout для углового повторного рендеринга dom. Вот пример:

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');
    });
}

Надеюсь, это поможет

Answer 2

Вы не опубликовали полный контекст своего кода, поэтому я предполагаю, что вы определили угловой модуль "talent" и этот элемент находится в области действия FunctionalityCreateCtrl. Я обернул ваш пример HTML в div с атрибутами ng-app и ng-controller, чтобы пример был функциональным.

Первая ошибка, которую я вижу в примере кода, который вы разместили, заключается в том, что элемент не закрыт должным образом. В теге close отсутствует косая черта: </select>,

Другая ошибка заключается в том, что вы устанавливаете модель элемента select как form.comp, но для form.comp, похоже, ничего не задано. Я добавил это в примере кода ниже.

Также обратите внимание, что я добавил идентификатор в выражение ng-options ng-options="s.id as s.name for s in functionality.competencesArray"> Это просто, чтобы я мог установить модель (form.comp) на значение, которое я знаю. Ваши данные могут отличаться.

Рабочий HTML-фрагмент:

<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>

Рабочий фрагмент Javascript (я добавил определение модуля talent и удалил вызов API только для того, чтобы пример работал):

(() => {
  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;
    }
  }
})();

Вот рабочий JSFiddle, использующий ваш пример кода: https://jsfiddle.net/g8r9ajtL/