Angular option array getting undefined when filling in values from controller

Question

I used this answer:

Working with select using AngularJS's ng-options

To try and get a dropdown list of options to fill from my AddCtrl controller:

$scope.newMeal = {};

        $scope.newMeal = {
            name: "",
            price: "",
            ingredients: "",
            description: "",
            category: "",
            cuisine: ""
        };

        $scope.categories = [
            { id: 1, name: 'Breakfast' },
            { id: 2, name: 'Lunch' },
            { id: 3, name: 'Dinner' }
        ];

        $scope.cuisines = [
            { id: 1, name: 'Thai' },
            { id: 2, name: 'Chinese' },
            { id: 3, name: 'Italian' },
            { id: 4, name: 'British' },
            { id: 5, name: 'Spanish' },
            { id: 6, name: 'Indian' },
            { id: 7, name: 'French' },
            { id: 8, name: 'Vietnamese' },
            { id: 9, name: 'Nordic' }
        ];

Into my form:

<div class="list list-inset">
                    <label class="item item-input item-select">
                        <div class="input-label">
                            Category
                        </div>
                        <select ng-model="newMeal.category" ng-options="category as categories.name for category in categories">
                            <option value="" ng-if="newMeal.category">&nbsp;</option>
                        </select>
                    </label>
                    <label class="item item-input item-select">
                        <div class="input-label">
                            Cuisine
                        </div>
                        <select ng-model="newMeal.cuisine" ng-options="cuisine as cuisines.name for cuisine in cuisines">
                            <option value="" ng-if="newMeal.cuisine">&nbsp;</option>
                        </select>
                    </label>
                </div>

However I'm getting the number of values to be filled in to be appearing, they all appear as "undefined" in the option dropdowns. How can I fix this? Note I want there to be a value of nothing if nothing is selected, and this default none value to disappear when anything is clicked.

Try removing your `option` tags. You don't usually use those with `ng-options`. — senschen, Mar 25 '16 at 11:35

score 2 · Accepted Answer · answered Mar 25 '16 at 13:29

Actually, you made just a little mistake:

Where you wrote the expression inside the ngOptions:

category as categories.name for category in categories

cuisine as cuisines.name for cuisine in cuisines

You could have use just:

category.name for category in categories

cuisine.name for cuisine in cuisines

Remember that, by default, when you don't have the "as" inside the expression, the entire object is assined to the $scope variable defined inside the ngModel. In this way, you don't need to declare category as category.name and cuisine as cuisine.name.

If you want to bind just the name of the category and cuisine, you also could use:

category.name as category.name for category in categories
cuisine.name as cuisine.name for cuisine in cuisines

Another important thing is that the ngModel already initializes the values and in this way you don't need to declare inside the controller:

$scope.newMeal = {}; // In this case this is useless because you are defining this property again in the next line.
$scope.newMeal = {
  name: "",
  price: "",
  ingredients: "",
  description: "",
  category: "",
  cuisine: ""
};

Let ngModel initializes it for you if you need it.

Following, the final code:

Controller

$scope.categories = [
    { id: 1, name: 'Breakfast' },
    { id: 2, name: 'Lunch' },
    { id: 3, name: 'Dinner' }
];

$scope.cuisines = [
    { id: 1, name: 'Thai' },
    { id: 2, name: 'Chinese' },
    { id: 3, name: 'Italian' },
    { id: 4, name: 'British' },
    { id: 5, name: 'Spanish' },
    { id: 6, name: 'Indian' },
    { id: 7, name: 'French' },
    { id: 8, name: 'Vietnamese' },
    { id: 9, name: 'Nordic' }
];

View

<div class="list list-inset">
    <label class="item item-input item-select">
        <div class="input-label">
            Category
        </div>
        <select ng-model="newMeal.category" ng-options="category.name for category in categories">
            <option value="" ng-if="newMeal.category">&nbsp;</option>
        </select>
    </label>
    <label class="item item-input item-select">
        <div class="input-label">
            Cuisine
        </div>
        <select ng-model="newMeal.cuisine" ng-options="cuisine.name for cuisine in cuisines">
            <option value="" ng-if="newMeal.cuisine">&nbsp;</option>
        </select>
    </label>
</div>

I'm accepting this answer instead. If I use the first method, category and cuisine is undefined when I submit the form. Your method doesn't have that issue, thanks @Rodrigo! — Dhruv Ghulati, Mar 26 '16 at 16:05

score 1 · Answer 2 · answered Mar 25 '16 at 11:50

The problem is that you're overriding the variable for 'category for' with the variable 'category as' in the select statement by using 'category' for both places. I.e.

category as category.name for category in categories

Use the below code to make it work

<select ng-model="newMeal.category" ng-options="category as cat.name for cat in categories">
      <option value="" ng-if="newMeal.category">&nbsp;</option>
</select>

and for cuisines this one:

<select ng-model="newMeal.cuisine" ng-options="cuisine as cuis.name for cuis in cuisines">
        <option value="" ng-if="newMeal.cuisine">&nbsp;</option>
</select>

Here's a working JSBIN

Worked like a charm. Thank you. – Dhruv Ghulati Mar 25 '16 at 11:53 — Dhruv Ghulati, Mar 25 '16 at 11:53

Angular option array getting undefined when filling in values from controller

2 Answers2