与 AngularJS 一起使用时，Selectpicker 不填充答案

【问题标题】：Selectpicker doesn't fill when using with AngularJS与 AngularJS 一起使用时，Selectpicker 不填充
【发布时间】：2017-10-24 00:43:13
【问题描述】：

我正在尝试填充选择选项 (selectpicker)，但没有成功。我的权限数组已正确填写，但在我的 HTML 中从未出现过选项。

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

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

【问题讨论】：

标签： angularjs bootstrap-selectpicker

【解决方案1】：

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

要使用 JavaScript 以编程方式更新选择，首先要操作选择，然后使用刷新方法更新 UI 以匹配新状态。这在删除或添加选项时是必要的，或者当通过 JavaScript 禁用/启用选择。

完成 ajax 请求后，需要 refresh 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');
    });
}

希望对你有帮助

【讨论】：

【解决方案2】：

您尚未发布代码的完整上下文，因此我假设您已经定义了角度模块“talent”并且该元素在 FunctionalityCreateCtrl 的范围内。我已将您的示例 HTML 包装在具有 ng-app 和 ng-controller 属性的 div 中，以便该示例具有功能。

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

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

还请注意，我已向 ng-options 表达式 ng-options="s.id as s.name for s in functionality.competencesArray"> 添加了一个 id，这只是为了将模型 (form.comp) 设置为我知道的值。您的数据可能不同。

工作 html sn-p:

<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 sn-p（我添加了人才模块定义并删除了 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/

【讨论】：