CODEWITHSUNDEEP
javascriptjsonangularjs
Gchorba
Gchorba

Reputation: 301

AngularJS ngoptions dropdown

So I am trying to create a dropdown selection menu in angularJS. I can list the contents using ng-repeat: 

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

which displays for me a list of foods. I would like to turn this into a selection instead. However no matter what I try it doesn't seem to display. here is what I had worked on so far:

<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>

Here is how I am getting the data: 

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

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

and here is a json sample: "id":"540894f9b2a136082606e5f0","created_at":"2014-09-04T16:36:09+0000","updated_at":"2014-09-04T16:36:09+0000","name":"bananas"

Upvotes: 0

Views: 74

Answers (1)

Austin
Austin

Reputation: 3080

JSFiddle Demo

Where option is like your index value of the array 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"
    }];

Upvotes: 2

Related Questions