Angularjs radio buttons in nested accordion do not keep values

Question

I got a problem. It works ok if I have ONLY one site (one accordion), but when I add two or more the radio buttons do not keep the selection, the sites are add on the fly

JavaScript

$scope.proposal2      = {sites:[{}]};

$scope.addSite = function(type){      // function to add sites
    $scope.proposal2.sites.push({});
}

HTML

<div class="ibox-content">
   <div class="form-group">
      <!-- panel accordion1 -->
      <div class="panel-group" id="accordion1">
         <div class="panel panel-default" ng-repeat="site in proposal2.sites">
            <div class="panel-heading">
               <h5 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion1" href="/proposal/new#collapse{{$index}}">Site {{$index}}</a>
               </h5>
            </div>
            <div id="collapse{{$index}}" class="panel-collapse collapse">
               <div class="panel-body">
                  <div class="accordion-inner">
                     <!-- panel accordion2 -->
                     <div class="panel-group" id="accordion-{{$index}}">
                        <div class="panel panel-default" ng-repeat="catf in categories | filter:{parent:1}">
                           <div class="panel-heading">
                              <h5 class="panel-title">
                                 <a data-toggle="collapse" data-parent="#accordion-{{$parent.$index}}" href="/proposal/new#collapse{{catf.id}}{{$parent.$index}}">{{catf.name}}</a>
                              </h5>
                           </div>
                           <div id="collapse{{catf.id}}{{$parent.$index}}" class="panel-collapse collapse">
                              <div class="panel-body">
                                 <label class="radio-inline" ng-repeat="cats in categories | filter:{parent:catf.id}">
                                 <input type="radio" name="type{{catf.id}}-{{$parent.$index}}" value="{{cats.id}}" ng-model="catf.cater" required="true" ng-change=""> {{cats.name}}
                                 </label>
                              </div>
                           </div>
                        </div>
                     </div>
                     <!-- panel accordion2 -->
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- panel accordion1 -->
   </div>
</div>

Behavior 1

When I select either Nec or panasonic it removes the option previously selected from the other accordions on "phone systems" it only works if I have just on site(one accordion) if I add more sites(more accordions) it doesn't work

Behavior 2

On this image shows that the previous selection is removed when I select Nec or panasonic on other site(other accordion)

So far I have tried

item.cater
$parent.item[catf.id][$parent.$index].cater
item[$parent.$index].cater

None of those are working

Thanks in advance!

Nick VN · Accepted Answer · 2014-12-20 13:31:18Z

0

It behaves like that because your ng-model="catf.cater" of your radio buttons binds to the cater property of the same object in all the sites. At least, I think so. You did not provide enough information to be sure.

You do not have category objects for each site. Your ng-model should bind to a specific object for each site. For example: ng-bind="site.categories[catf.id].selectedValue"

edited Dec 20, 2014 at 13:31

answered Dec 20, 2014 at 13:25

Nick VN

3383 silver badges7 bronze badges

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

Comments

Mjeduar · Accepted Answer · 2014-12-21 23:32:13Z

0

I found the solution is working now

I had two mistakes

Solution

<input type="radio" name="type{{catf.id}}-{{$parent.$index}}-{{$parent.$parent.$index}}"  value="{{cats.id}}"  ng-model="site[$parent.$parent.$index].catf[catf.id].cats.id" required="true" ng-change="">

First mistake the name of the control should be :

name="type{{catf.id}}-{{$parent.$index}}-{{$parent.$parent.$index}}"

Second ng-model

ng-model="site[$parent.$parent.$index].catf[catf.id].cats.id"

Result

Sites [ { "0": { "catf": { "2": { "cats": { "id": "9" } }, "4": { "cats": { "id": "12" } }, "5": { "cats": { "id": "13" } } } } }, { "1": { "catf": { "2": { "cats": { "id": "9" } }, "4": { "cats": { "id": "11" } } } } }, { "2": { "catf": { "2": { "cats": { "id": "10" } }, "4": { "cats": { "id": "11" } } } } } ]

Thanks all.

edited Dec 21, 2014 at 23:32

answered Dec 21, 2014 at 3:56

Mjeduar

971 gold badge1 silver badge11 bronze badges

3 Comments

flup Over a year ago

You're making it way too complicated. Take a look at my example code for a simpler suggestion.

Mjeduar Over a year ago

Thank you flup for your help I really appreciate it, anyway I did in this way because I need to know the id parents for every selection, so that latter on I could retrieve it

flup Over a year ago

Updated my post to show all the information is there. I still think this solution is (quite a bit) more complicated than it needs to be.

flup · Accepted Answer · 2014-12-22 01:10:59Z

You're editing site data, and the model object is site. So all data should be added to the site object.

Right now you're adding the site data to the category lists. There's only one instance of that list which will be reused for each site.

When storing the phone system for a site, store it in site['phoneSystem']. Store the security in site['security'], etc. So in the binding replace ng-model="catf.cater" with ng-model="site[catf.id]".

Here's a bit more concise working example (without accordion panels which are not relevant for the problem):

angular.module('myApp', [])
  .controller('MyCtrl', ['$scope',
    function($scope) {
      $scope.sites = [{
        name: 'site 1'
      }, {
        name: 'site 2'
      }];
      $scope.categories = [{
        id: 'phoneSystems',
        name: 'Phone Systems'
      }, {
        id: 'security',
        name: 'Security'
      }];
      $scope.choices = {
        'phoneSystems': [{
          name: 'NEC',
          id: 'nec'
        }, {
          name: 'Panasonic',
          id: 'panasonic'
        }],
        'security': [{
          id: 'ssl',
          name: 'Secure Sockets Layer'
        }, {
          id: 'none',
          name: 'No such thing'
        }]
      };
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app='myApp' ng-controller="MyCtrl">
  <h1>model data</h1>
  {{sites|json}}
  <h1>site list</h1>
  <div ng-repeat="site in sites">
    <h2>{{site.name}}</h2>
    <div ng-repeat="category in categories">
      <h3>{{category.name}}</h3>
      <label class="radio-inline" ng-repeat="choice in choices[category.id]">
        <input type="radio" value="{{choice.id}}" ng-model="site[category.id]" required="true">{{choice.name}}
      </label>
    </div>
  </div>
</body>

-- EDIT --

So instead of using per site

{
    "0": {
        "catf": {
            "2": {
                "cats": {
                    "id": "9"
                }
            },
            "4": {
                "cats": {
                    "id": "12"
                }
            },
            "5": {
                "cats": {
                    "id": "13"
                }
            }
        }
    }
}

You'd end up with

{
    "id": "0",
    "2": "9",
    "4": "12",
    "5": "13"
}

Which seems simpler to me. (Though I'd suggest using a bit more meaningful IDs.)

Hussain Hamdani · Accepted Answer · 2014-12-23 13:42:15Z

The ng-model value is wrong in this line

Replace this "ng-model="$parent.item[catf.id][$parent.$index].cater" With "ng-model="catf.cater".

Or

Go through this code:

<!-- panel accordion1 -->   
<div class="panel-group" id="accordion1">
    <div class="panel panel-default" ng-repeat="site in proposal2">
        <div class="panel-heading">
            <h5 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion1" href="/proposal/new#collapse{{$index}}">Site {{$index}}</a>
            </h5>
        </div>
        <div id="collapse{{$index}}" class="panel-collapse collapse">
            <div class="panel-body">
            <div class="accordion-inner">
            <!-- panel accordion2 -->                               
                <div class="panel-group" id="accordion-{{$index}}">
                    <div class="panel panel-default" ng-repeat="catf in site.item" >
                        <div class="panel-heading">
                            <h5 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion-{{$parent.$index}}" href="/proposal/new#collapse{{catf.id}}{{$parent.$index}}">{{catf.name}}</a>
                            </h5>
                        </div>
                        <div id="collapse{{catf.id}}{{$parent.$index}}" class="panel-collapse collapse">
                            <div class="panel-body">
                                <label class="radio-inline" ng-repeat="cats in catf.item">
                                 <input type="radio" name="type-{{$parent.$parent.$index}}-{{$parent.$index}}"  value="{{cats.name}}"  ng-model="catf.cater" required="true" ng-change=""> {{cats.name}}
                                    {{$parent.$parent.$index}}{{$parent.$index}}{{$index}}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            <!-- panel accordion2 -->   
            </div>
            </div>
        </div>
    </div>
</div>
<!-- panel accordion1 -->
<div ng-repeat="site in proposal2">
   <div ng-repeat="siteitems in site.item">
         {{site.name}} result = {{siteitems.cater}}<br /><br />
   </div>
</div>

And your $scope data array like this

$scope.proposal2 = [{
                            'name' : 'Site 1',
                            'item' : [
                                        {
                                            'name' : 'Phone Sysyem',
                                            'cater': '',
                                            'item' : [{'name' : 'Phone Sysyem - 1'},{'name' : 'Phone Sysyem - 2'}]
                                        },
                                        {
                                            'name' : 'Security',
                                            'cater': '',
                                            'item' : [{'name' : 'Security - 1'},{'name' : 'Security - 2'}]
                                        },
                                        {
                                            'name' : 'Copies',
                                            'cater': '',
                                            'item' : [{'name' : 'Copies - 1'},{'name' : 'Copies - 2'}]
                                        }
                                      ]
                            },
                            {
                                'name' : 'Site 2',
                                'item' : '',
                            }];

I tried it, it didn't work, I added my Javascript code, any idea? thanks.
@Mjeduar Can you please provide a link to stackblitz or share insight into this question. It would help me very much. stackoverflow.com/questions/65209830/…

Collectives™ on Stack Overflow

Angularjs radio buttons in nested accordion do not keep values

4 Answers 4

Comments

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related