1

我正在尝试填写选择选项（selectpicker），但没有成功。我的权限数组已正确填写，但在我的 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>
4

2 回答 2

3

您应该在完成 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');
    });
}

希望有帮助

于 2017-10-24T02:27:08.817 回答
0

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

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

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

另请注意，我已在 ng-options 表达式中添加了一个 idng-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/

于 2017-10-24T01:22:28.183 回答