使用AngularJs用ajax和ng选项填充select

Question

使用angularJS，我需要用来自ajax调用的数据填充select。

我有一个叫"TabPac专业控制器"的控制器。在这个控制器中，我调用ajax来获取json数据("profiessionais对象")。到目前为止还不错。

我的问题是，我得到了从服务器返回的json数据，但我的选择永远不会被填充。

我在这里错过了什么？

我的ajax返回是：

{"results":[{"nr":"8","nome":"AAAAAAAAAAAA"},
{"nr":"17","nome":"BBBBBBB"},
{"nr":"27","nome":"BBBBBAAAAA"},
,{"nr":"1004","nome":"CCCCCCCCC"}]}

HTML

<div class="form-group">
<label for="paciente.texto.sexo" class="col-sm-2 control-label">Profissional:</label>
<div class="col-sm-10" ng-controller="TabPacProfissionalController as tabProfCtrl">
<select class="form-control" ng-model="selectedProf" ng-options="nome for (nr,nome) in tabProfCtrl.profissionais">
<option value=''>Select an option</option>
</select>
</div>
</div>

JS:

app.controller('TabPacProfissionalController', function($http) {
this.profissionais = {};
$http.get('/getStaff?tipoProf=1').then(function(response){
this.profissionais=response.data.results;
console.log(this.profissionais.toString());
},function(error){
console.log(error);
});
});

Answer 1

如果希望标签显示nome属性，并且值为nr属性，请尝试以下操作：

<div class="form-group">
<label for="paciente.texto.sexo" class="col-sm-2 control-label">Profissional:</label>
<div class="col-sm-10" ng-controller="TabPacProfissionalController as tabProfCtrl">
<select ng-model="tabProfCtrl.selectedProf" ng-options="profissionais.nr as profissionais.nome for profissionais in tabProfCtrl.profissionais">
<option value="">Select</option>
</select>         
</div>
</div>

您正在使用的(键，值)表示法用于对象数据源，就像您想迭代单个对象的属性一样，而不是像$http调用那样的对象集合。

要查看解析的服务器响应，可以使用angular.fromJson(response.data)

这是一个演示功能的plunker。