AngularJS ngoptions 下拉菜单

Question

所以我试图在 angularJS 中创建一个下拉选择菜单。我可以使用 ng-repeat 列出内容：

<table ng-table="tableParams" class="table">
<tr ng-repeat="food in foods">
<td data-title="'Name'">{{food.name}}</td>
</tr>
</table>

它为我显示了一份食物清单。我想把它变成一个选择。 但是，无论我尝试什么，它似乎都没有显示。 这是我迄今为止所做的工作：

<select id="food_select"class="form-control"
            ng-model="food"
            ng-options="item as item.name for item in food track by item.id">
<option value="">(Pick food)</option>
            </select>

这是我获取数据的方式：

 function getFoodList() {
            FoodService.getFoods().then(function (_data) {

                $scope.foods= _data.foods;
                 console.log("foodlist"+JSON.stringify( $scope.foods));
            });
        }

这是一个 json 示例： "id":"540894f9b2a136082606e5f0","created_at":"2014-09-04T16:36:09+0000","updated_at":"2014-09-04T16:36:09+0000","name":"香蕉"

Answer 1

JSFiddle Demo

option 就像你的数组 food 的索引值。

HTML

<div ng-app>
    <div ng-controller="Ctrl">
        <select ng-options="food.option as food.name for food in foods" ng-init="index = 0" ng-model="option[index]">{{food.name}}</select>
    </div>
</div>

JS

function Ctrl($scope) {
    $scope.foods = [{
        option: "1",
        name: "apple"
    }, {
        option: "2",
        name: "orange"
    }, {
        option: "3",
        name: "chicken"
    }];