如何填充下拉菜單

Question

我正在使用bootstrap和angularjs的用戶界面和谷歌appengine與Java作爲後端。 剛纔我有一個填充下拉菜單的問題，我看到一個空列表，所以我懷疑問題出在html代碼中。

前端：

<div class="dropdown" > 
    <select id="mySelPartido" class="form-control"> 
     <option ng-repeat="partido in data.locations.partidos" 
      ng-selected="partido.selected" ng-model="partido.partido">{{partido.partido}}</option> 
    </select> 
</div> 

JS的角度代碼（我調試代碼和它的作品！）：

$scope.status = 'loading...'; 
    $scope.partido = "Select partidos"; 
    $scope.data = { 
     "locations": {} 
    }; 

$http.get('https://myservice.appspot.com/_ah/api/partidoendpoint/v1/partido') 
    .then(function (res) { 
         $scope.data.locations.partidos = res.data.items; 
         $scope.status = "loaded " 
           + $scope.data.locations.partidos.length 
           + " partidos."; 
        }); 

從App Engine的後端我的服務響應：

{ 
"items": [ 
    { 
    "id": { 
    "kind": "Partido", 
    "appId": "s~myservice", 
    "id": "5066549580791808", 
    "parent": { 
    "kind": "Provincia", 
    "appId": "s~myservice", 
    "id": "5086253011697664", 
    "complete": true 
    }, 
    "complete": true 
    }, 
    "name": "Florencio Varela", 
    "kind": "partidoendpoint#resourcesItem" 
    }, 
    { 
    "id": { 
    "kind": "Partido", 
    "appId": "s~myservice", 
    "id": "5094432508477440", 
    "parent": { 
    "kind": "Provincia", 
    "appId": "s~myservice", 
    "id": "5086253011697664", 
    "complete": true 
    }, 
    "complete": true 
    }, 
    "name": "La Matanza", 
    "kind": "partidoendpoint#resourcesItem" 
    } 
], 
"kind": "partidoendpoint#resources", 
"etag": "\"PQS12KaO4-dKVfv_BcCoEkbIN9g/GvZKzZUnrHEP8TKWybTkd_fJbnc\"" 
} 

Answer 1

檢查角度documentation for select。

也許嘗試在select元素中使用ngOptions指令。示例：

function demo($scope) { 
 
    $scope.items = [ 
 
    { name: 'foo' }, 
 
    { name: 'bar' }, 
 
    { name: 'baz' } 
 
    ]; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app ng-controller="demo"> 
 
    
 
    <select ng-options="item.name for item in items" 
 
      ng-model="selected"> 
 
    </select> 
 
    
 
    <p>You have selected : {{ selected }} 
 
    
 
</div>