Question

所以这与我之前的问题有关：

Dynamically add options to a Angular chosen combo box

基本上这个：

 <select  ui-jq="chosen" ng-model='program_list'  class="form-control">
    <option value=""></option>
    <option ng-repeat="program in programs">{{ program.title }}</option>
</select>

虽然我尝试了ng-repeat和ng-options，但

不起作用。如果它是静态数据，它可以工作，但是从$ http.get获取的数据不会被推送为选项。

然而，我后来发现:(其中a是$ scope）

a.programs=[{"id":"1","title":"This is a sample"},{"id":"2","title":"Sample Title"}];

在我的控制器中推送到组合框，所以最后我意识到问题出在这里:(其中b是$ http）

 b.get('http://localhost/training_system/retrieve_train.php?program=Y')
.then(function (result) {
    //a.programs=result.data;
    var prog=[];
    for(var key in result.data){
        prog.push(result.data[key]);

    }
    a.programs=prog;    

    });

我几乎解决了它，但我无法让它发挥作用。如果我发出警报（a.programs），则会留下空白通知。我怎么能最终解决它？

（顺便说一句，如果我在组合框外面写变量，比如：）

<label class="form-label" for="field-1">Select Training Program <span ng-repeat='program in programs'>{{program.title}}</span></label>

它出现了。只是不在组合框内。

---这可能会与我之前的问题合并，我只需要找到它的解决方案。

Answer 1

它是您正在使用的jquery插件或您的休息端点。尝试从此端点获取http，看看它是否更快.. https://httpbin.org/get?item1=Option1&item2=Option2。您需要稍微更改控制器代码，因为这将响应不同的数据结构。这应该有效：

$http.get('https://httpbin.org/get?item1=Option1&item2=Option2')
.then(function (result) {
    var prog=[];
    for(var key in result.data.args){
        prog.push(result.data.args[key]);

    }
    $scope.programs = prog;    

});

然后在HTML中：

<h1>Selected item: {{program_list}}</h1>
<select ng-model='program_list'  class="form-control">
    <option value="">Select one</option>
    <option ng-repeat="program in programs">{{ program }}</option>
</select>

Here是一个小提琴手。请注意，这不使用jquery插件，因此如果它添加了额外的功能，我的示例可能不适用。

Answer 2

我解决了以下问题：

window.setInterval(function() {
$('.chosen').trigger('chosen:updated');
}, 1000);

AngularJS选择的组合框不加载$ http.get变量

2 个答案: