angularjs - ng-options with nested json based on previous select option

Question

i'm kind of new in Angular, and I facing a problem, I didn't find an answer that could help me, if some one could, thank you. :)

I have a json like this:

"items": [
{
  "post_type": "release",
  "label": "Releases"
},
{
  "post_type": "news",
  "label": "Notícias",
  "options": [
    {
      "id": 1,
      "name": "Galeria de Fotos"
    },
    {
      "id": 2,
      "name": "Agência de Notícias"
    },
    {
      "id": 3,
      "name": "Rádio"
    },
    {
      "id": 4,
      "name": "TV"
    }
  ]
},....

And I m getting data like:

  var _preparingPostTypes = function ($scope) {
    $scope.post_types = [];

    PostTypeService.getPostTypes().then(function (data) {
      $scope.post_types = data.data;
    });
  };

What I want to do is create 2 selects, 1st - with the post_type ('release', 'news') and a second one with the 'options' array from a post_type, that is only visible when select an option with the 'options' in the array like 'news'. I did something like this, where I can get the post_type like a charm, but I don't know how to proceed:

<div class=form-group>
    <label>Pesquisar em:</label>

    <select title="Pesquisar em:" class="form-control select-post-type"
        ng-model="widget.post_type"
        ng-options="item.post_type as item.label for item in post_types.items"></select>
</div>

EDIT:

In my request I need to pass the post_type string to server, from the first select, so the ng-options is:

ng-options="item.post_type as item.label for item in post_types.items

Not:

ng-options="item as item.label for item in post_types.items

Thanks everybody!

Answer 1

You can add an ng-change to the first select that calls a function that loads the options

<select title="Pesquisar em:" class="form-control select-post-type"
    ng-model="widget.post_type"
    ng-options="item as item.label for item in post_types.items" ng-change="typeChanged()"></select>

And the function would load inside $scope.options the selected type options. Then you iterate over $scope.options in the second select

---

UPDATE:

I haven't tested the code, but it may guide you

Select:

<select title="Options:" class="form-control select-post-type"
      ng-model="widget.option"
      ng-options="option as option.name for option in options">

Change function (triggered when the value of the first select changes, so it will have the responsibility of loading the options of the post_type selected):

$scope.typeChanged = function() { 
    for (var i = 0; i < $scope.post_types.items.length; ++i) {
        if ($scope.post_types.items[i].label == $scope.widget.post_type) $scope.options = $scope.post_types.items[i].options || [];
    }
}

Answer 2

widget.post_type should contain the selected item. So the other select can have options like option as option.name in widget.post_type.options . Note that you should probably have an options collection on each item if you want this to work.

Answer 3

You can do this very easily using following technique. You just need to use the ng-model from the first select. See my approach:

<label>Pesquisar em:</label>

<select title="Pesquisar em:" class="form-control select-post-type"
    ng-model="firstSelect"
    ng-options="item as item.label for item in post_types.items"></select>

<select title="Second one" class="form-control select-post-type"
    ng-model="secondSelect" ng-show="firstSelect.options"
    ng-options="option as option.name for option in firstSelect.options"></select>