无法通过angularjs访问javascript-object属性

Question

我无法在angularjs中访问javascript对象的属性。

我有以下html来显示一个下拉列表，其中包含从角度http-call加载的所有省份：

$http.get("http://myRestUrl/province").then(function(response)
{
  $scope.provinces = angular.fromJson(response.data);
});

<select class="form-control" ng-model="selectedProvince">
  <option value="" selected>Bundesland auswählen</option>
  <option ng-repeat="province in provinces" value="{{province}}">
    {{province.name}}
  </option>
</select>

{{selectedProvince}} <!-- Output the Object -->
{{selectedProvince.cities}} <!-- Output nothing -->

Province对象看起来像这样：

{"id":1,"name":"North Rhine-Westphalia","nation":{"id":1,"name":"Germany"},"cities":
[{"id":1,"name":"Münster","province":{"id":1,"name":"North Rhine-Westphalia"}},
{"id":2,"name":"Rinkerode", "province":{"id":1,"name":"North Rhine-Westphalia"}}]}

访问{{selectedProvince.name}}或任何其他属性也是空结果。

selectedProvince在$ scope中定义！

有人知道我如何访问该数据？

Answer 1

value="{{province}}"将无法正常工作，因为它将整个对象呈现为字符串。 对于非字符串值，您需要查看ng-options 。

这应该为您工作：

<select class="form-control" ng-model="selectedProvince"
  ng-options="province.name for province in provinces">
  <option value="" selected>Bundesland auswählen</option>
</select>