javascript - 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”，“名称”:“香蕉”

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"
    }];