与 AngularJS 一起使用时选择器不填充

Question

我正在尝试填充 select 选项（select选择器），但没有成功。我的 competenceArray 已正确填充，但在我的 HTML 中从未出现选项。

有人可以帮我 select选择器吗？

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

您尚未发布代码的完整上下文，因此我假设您已经定义了 angular 模块 "talent" 并且该元素在 FunctionalityCreateCtrl 的范围内。我已经将您的示例 HTML 包装在具有 ng-app 和 ng-controller 属性的 div 中，这样示例就可以正常工作了。

我在您发布的代码示例中看到的第一个错误是元素未正确关闭。关闭标记缺少正斜杠：</select>.

另一个错误是您将 select 元素的模型设置为 form.comp，但 form.comp 似乎没有设置任何值。我已经在下面的代码示例中添加了它。

另请注意，我在 ng-options 表达式中添加了一个 id 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 代码片段（我添加了人才模块定义并删除了 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/

Answer 2

您应该在完成 ajax 请求后刷新 select 选择器。来自文档：

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.

当 ajax 请求完成后，你需要刷新 select ，并将其放入 $timeout 以等待 angular 重新渲染 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');
    });
}

希望对您有所帮助

与 AngularJS 一起使用时选择器不填充

Selectpicker doesn't fill when using with AngularJS

angularjs

bootstrap-selectpicker