动态添加选项的选择角度组合框

问题描述：

<select ui-jq='chosen' ng-model='trainer_list' multiple class="form-control" data-placeholder="Select Multiple Trainers" ng-options='trainer.id as trainer.name for trainer in trainers'> 

</select>

我把这个从一个角度引导主题，我挣扎使用它。基本上，我想从这个角度脚本

$http({ 
     method: 'GET', 
     url: 'http://localhost/training_system/retrieve_train.php?trainer=Y' 
}).success(function (result) { 
    $scope.trainers = result; 

});

使用，并在组合框中使用它，我不能用静态的选项，这显然是工作的唯一部分。我该怎么办？

更新：所以我尝试了使用ng-repeat而不是ng-options的Abhilash的解决方案，并且它在第一次尝试的时候就起作用了。但现在我不能再重复它了，我拥有的只是一个空的保管箱。我没有改变任何东西，但它不再有效。 ui-jq是否可能与AngularJS不兼容？

显然，代码工作......但只有几分钟的延迟。我该如何摆脱延迟？ –

如果您想使用选择的远程的ngOptions，请尝试使用https://github.com/leocaseiro/angular-chosen。它工作得很好。 –

答

试试这个：

<select ui-jq='chosen' ng-model='trainer_list' multiple class="form-control" data-placeholder="Select Multiple Trainers"> 
    <option value="{{trainer.id}}" ng-repeat="trainer in trainers"> {{trainer.name}} </option> 
</select>

调试您的变量trainers

只是在你的网页的任意位置添加此代码调试，

<label> To Do: Remove this after testing. Trainer = {{trainers}} </label>

，看看什么是教练的值。你的服务器调用后这个变量是否正在更新？

我不明白。当我调试{{trainers}}变量时，它显示在页面中，但select语句仍然不显示选项 –

不，等等，它工作正常！我重新加载了页面，它工作正常！感谢修复！ –

我注意到问题在于延迟填充元素，而不是脚本本身。我如何摆脱延迟？ –

答

这是我如何解决它：

在您选择的标签，把NG-IF = “教员”。这将阻止DOM加载，直到您的http请求完成

动态添加选项的选择角度组合框

相关推荐