javascript - AngularJS (1.5.8) - 如何直接从获取 json 对象的 Controller 内填充选择选项列表？

Question

我有一个 AngularJS 应用程序，我想从 JSON 结果填充选择下拉列表。

Controller 代码获取 json，但如何填充 $scope.states。

我的下拉菜单在获取时仍然为空，并且页面的资源不会呈现。

$scope.accountAddresses 是一个包含各种数据的 JSON 容器。我只关心 ShippingState 键。

HTML 代码

<select name="shippingState" id="shippingState"  ng-model="accountAddresses.shippingState"  class="state form-control" size="1">

Controller JSON 获取代码

 $http.get( serviceBase + 'Assets/us-states.json').success(function(d){
            $scope.states = d;
      });

我尝试了 ng-repeat="state in $scope.states" 但我没有在下拉列表中获得任何数据(状态缩写)。

JSON 示例数据

[
    {
        "name": "Alabama",
        "abbreviation": "AL"
    },
    {
        "name": "Alaska",
        "abbreviation": "AK"
    }]

如何让总体像下面的选项 html 代码一样工作？

 <option value="AK">AK</option>
<option value="AL">AL</option>

编辑

使用以下代码

 <select name="shippingState" id="shippingState"  ng-model="accountAddresses.shippingState"  ng-options ="s.abbreviation as s.name for s in states" class="state form-control" size="1">

我得到以下内容，但我需要删除“string:”和标签

<option value="string:AL" label="Alabama">Alabama</option>
<option value="string:AK" label="Alaska">Alaska</option>

Answer 1

您可以使用 ng-options 来执行此操作,

<select ng-model="selectedItem" ng-options ="s.name  for s in states"></select>

Controller :

  function($scope, $http) {
             $http.get('test.json').then(function (response){
                $scope.states = response.data;
                console.log(response);
        });

DEMO APP