Using Angular to repeat over nested object

Question

I looked through the previous questions on this topic but I could not find anything that looked like this.

My problem is that I want to make a second HTML radio button array depend on which radio button is selected first. Say the array of objects come to me like this:

"Names":[{ 
          "name": "Fido",
          "id": "1",
          "type": [
                {   
                "typeName": "Dog",
                "typeId": "1"
            },
            {
                "typeName": "Cat",
                "typeId": "2"
            },
            {
                "typeName": "Mouse",
                "typeId": "3"
            }
        ]
    },
    {
        "name": "Bella",
        "id": "2",
        "type": [
            {
                "typeName": "Cat",
                "typeId": "2"
            },
            {
                "typeName": "Mouse",
                "typeId": "3"
            }
        ]
    }]

My AngularJS code currently looks like this:

  <label ng-repeat="item in nameList.Names">
            <input type="radio" name="Name" ng-model="$parent.selectedName"
            ng-value="item"> {{item.name}} </input>

         <label ng-repeat="item in nameList.Names[$parent.selectedName.id].type"> <input
            type="radio" name="Type" ng-model="$parent.selectedType"
            ng-value="type"> {{item.typeName}}</input>
         </label>
  </label>

I'm quite sure this isn't working due to the $parent.selectedName.id part - ng-repeat already creates a child scope so this would be the "grandchild" of the original scope which means that $parent is just referring to the above script and not the rest of the code.

Is there a way to work around this so I can have a list that changes options based on the first selected value?

Edit: What I actually want to do is that I want to be able to select a radio button (in this case "Fido" or "Bella") and depending on selection have either array of "type" pop up in a second radio button list. Is there a way to make this work or do I need to split up the "Names"-object?

Would be great if you can create a fiddle for the same. So that we get an idea the HTML which you are expecting :) — Vaibhav Pachauri
– Vaibhav Pachauri, Commented Jul 21, 2015 at 7:19
jsfiddle.net/Lf9dpd3k - Can't do anything more since I really have no idea what the code is supposed to look like. I want the second radio buttons to become visible as soon as I select one of the first two and the second ones are supposed to be named after the elements in the inner "type" array. — Alex
– Alex, Commented Jul 21, 2015 at 7:39
Look at the answer. I guess this is the answer you are looking for :) — Vaibhav Pachauri
– Vaibhav Pachauri, Commented Jul 21, 2015 at 7:54

Justus Romijn · Accepted Answer · 2015-07-21 08:14:49Z

2

You should show the optional options outside of the ng-repeat, and set the selected item to some other scope value. See this snippet.

Note: for some reason the radio-button ng-model cannot be set on a scope variable, but needs to be an attribute of an object. Don't know why.

angular
    .module('someApp', [])
    .controller('someController', function($scope){
  $scope.name = {
    selected: null
  };
  $scope.nameList = {
    Names: [{
     name: 'Foo',
     type: [
       { typeName: 'ready' },
       { typeName: 'steady' }
     ]
    },{
     name: 'Bar',
     type: [
       { typeName: 'start' },
       { typeName: 'stop' }
     ]
   }]
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="someApp">
  <div ng-controller="someController">
    <div ng-repeat="item in nameList.Names">
      <label>
        <input type="radio" name="Name" ng-model="name.selected"
        ng-value="item" />{{item.name}}
      </label>
    </div>

    <label ng-repeat="type in name.selected.type">   
      <input
        type="radio" name="Type" ng-model="$parent.selectedType"
        ng-value="type"  />{{type.typeName}}
      </label>
  </div>
</div>

edited Jul 21, 2015 at 8:14

answered Jul 21, 2015 at 7:20

Justus Romijn

16.1k5 gold badges54 silver badges64 bronze badges

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

6 Comments

Alex Over a year ago

They're both referring to the same scope and that's my main problem - both of the radio lists need to augment the highest scope.

Justus Romijn Over a year ago

@Alex I see, I've created a fiddle that has the functionality that you desire I think.

Alex Over a year ago

This looks about right - Let me try it on the actual code and I'll see if it works! thanks!

Alex Over a year ago

Would you happen to know how I can bind the $parent.selectedName and $parent.selectedType to your code @Justus? I'm working on a small piece and not using them breaks the rest of the code.

Justus Romijn Over a year ago

@Alex hard to say without any context. But for example, when you make a choice on the selection you could update the original array with the selected values. Maybe a $watch or a ng-click function could do the trick.

|

Vaibhav Pachauri · Accepted Answer · 2015-07-21 07:54:16Z

2

Please look at the following plnkr. I guess this is what you are looking for :

` `http://plnkr.co/edit/RQQi5Fo9FzM409qKHwjG?p=preview

I hope that does the trick :)

answered Jul 21, 2015 at 7:54

Vaibhav Pachauri

2,6712 gold badges21 silver badges34 bronze badges

1 Comment

Alex Over a year ago

Good guidance. I used this together with the answer in the final code.

Himanshu Mittal · Accepted Answer · 2015-07-21 07:34:51Z

0

You can use ng-value for what you want :

<div ng-repeat="name in names">
      <input type="radio" name="myRadio" ng-model = "selectedParent" ng-value="name.type">
          {{name.name}}
      </input>
</div>
   <div ng-repeat="selected in selectedParent">
        <input type="radio" name="childRadio" ng-model="selectedId" ng-value="selected.typeId" >{{selected.typeName}}</input>
    </div>

answered Jul 21, 2015 at 7:34

Himanshu Mittal

8047 silver badges19 bronze badges

1 Comment

Alex Over a year ago

This looks like it could work - could you please create a plunkr or fiddle so I can see how this would work in practice? Thanks!

Collectives™ on Stack Overflow

Using Angular to repeat over nested object

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related