Angularjs Radio Buttons In Nested Accordion Do Not Keep Values

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 JavaScrip

Solution 1:

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"

Solution 2:

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.

Solution 3:

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'
        }]
      };
    }
  ]);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><bodyng-app='myApp'ng-controller="MyCtrl"><h1>model data</h1>
  {{sites|json}}
  <h1>site list</h1><divng-repeat="site in sites"><h2>{{site.name}}</h2><divng-repeat="category in categories"><h3>{{category.name}}</h3><labelclass="radio-inline"ng-repeat="choice in choices[category.id]"><inputtype="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.)

Solution 4:

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 --><divclass="panel-group"id="accordion1"><divclass="panel panel-default"ng-repeat="site in proposal2"><divclass="panel-heading"><h5class="panel-title"><adata-toggle="collapse"data-parent="#accordion1"href="/proposal/new#collapse{{$index}}">Site {{$index}}</a></h5></div><divid="collapse{{$index}}"class="panel-collapse collapse"><divclass="panel-body"><divclass="accordion-inner"><!-- panel accordion2 --><divclass="panel-group"id="accordion-{{$index}}"><divclass="panel panel-default"ng-repeat="catf in site.item" ><divclass="panel-heading"><h5class="panel-title"><adata-toggle="collapse"data-parent="#accordion-{{$parent.$index}}"href="/proposal/new#collapse{{catf.id}}{{$parent.$index}}">{{catf.name}}</a></h5></div><divid="collapse{{catf.id}}{{$parent.$index}}"class="panel-collapse collapse"><divclass="panel-body"><labelclass="radio-inline"ng-repeat="cats in catf.item"><inputtype="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 --><divng-repeat="site in proposal2"><divng-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' : '',
                            }];