Angular array won't show nested array

Question

I am trying to show a nested array in AngularJS. However, I can't get it to work.

Controller:

$scope.selected_category = [];
$scope.categories = [];

$scope.getCategories = function() {
    ItemService.getCategories().success(function(categories) {
        $scope.categories = categories;
    });
}

$scope.getCategories();

The form setting $scope.selected_category

<select class="form-control" ng-model="selected_category">
    <option ng-repeat="category in categories" value="{{ category }}">{{ category.name }}</option>
</select>

So... now printing {{ selected_category }} show the expected array with a subcategory array inside:

{
  "id": "1",
  "name": "clothing",
  "subcategories": [
    {
      "id": "1",
      "name": "jackets",
      "item_category_id": "1"
    },
    {
      "id": "2",
      "name": "jeans",
      "item_category_id": "1"
    },
    {
      "id": "3",
      "name": "sweaters",
      "item_category_id": "1"
    }
  ]
}

Hooowever, when I try to do selected_category.subcategories I get nothing. Why is that?

Here's a plunker with the reproduced problem: http://plnkr.co/edit/AtqpXogmItdSupEZGt7R?p=preview

In your plunker you're assigning category.name and not the actual category object to selected_category — m.e.conroy
– m.e.conroy, Commented Nov 15, 2013 at 14:48

AlwaysALearner · Accepted Answer · 2013-11-15 14:38:58Z

2

Use ng-options:

<select class="form-control" ng-model="selected_category" 
ng-options="category as category.name for category in categories">
</select>

answered Nov 15, 2013 at 14:38

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular array won't show nested array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related