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!

miquelarranz · Accepted Answer · 2016-05-25 17:12:26Z

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

edited May 25, 2016 at 17:12

answered May 25, 2016 at 15:56

miquelarranz

90411 silver badges27 bronze badges

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

3 Comments

Lucas Santos Over a year ago

Thank you @miquelarranz. It would be nice! :D

miquelarranz Over a year ago

@LucasSantos I have added some code, try it and let me know if it does not work, I don't have time to test it right now.

Lucas Santos Over a year ago

Worked like a charm @miquelarranz! I just made a change in "if" statement to: ...items[i].post_type == ... cause post_type and label are different. Thank you man!

Amy Blankenship · Accepted Answer · 2016-05-25 16:08:18Z

0

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.

answered May 25, 2016 at 16:08

Amy Blankenship

7,0613 gold badges27 silver badges51 bronze badges

2 Comments

Lucas Santos Over a year ago

Thank you Amy, but that don't solve for me, I have items with and without the options, and I can't work on the json.

Amy Blankenship Over a year ago

Then you need to add a check to your ng-if to see if it makes sense to show the second select (after all, if there are no options, there's nothing to select.

Beroza Paul · Accepted Answer · 2016-05-25 17:19:23Z

0

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>

edited May 25, 2016 at 17:19

answered May 25, 2016 at 16:51

Beroza Paul

2,1271 gold badge16 silver badges17 bronze badges

5 Comments

Lucas Santos Over a year ago

That's a good approach @Beroza Paul, but i don't think is going to work, cause not always will exist a firstSlect.options, and I need to check this.

Beroza Paul Over a year ago

ng-show=firstSelect.options will take care of the check you are talking about. It would be really nice if you could check the fiddle I created jsfiddle.net/3uj6aksn. It's working in jsfiddle.

Lucas Santos Over a year ago

yep @BerozaPaul, but at the first select my model is not an object, is a string I need to send to server, I made an edit to fix it a lil time ago. So, I cant check 'firstSelect.options'. =/ . But your approach is totally right!

Beroza Paul Over a year ago

I am sorry, I could not understand what you have said. As long as you have the JSON data structure like the one you shared my approach will work. Your string and object part is not clear to me :)

Lucas Santos Over a year ago

Sorry, what I'm trying to say is that at the first select, I will select -item.post_type as item.label-, not -item as item.label- so the model (firstSelect) will be just the post_type string of the item, not de item object itself, with post_type, label, options. So I cant check firstSelect.options, understand?

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related