Angularjs Radio Buttons In Nested Accordion Do Not Keep Values
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'
}]
};
}
]);<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.)
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 -->
<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' : '',
}];
Post a Comment for "Angularjs Radio Buttons In Nested Accordion Do Not Keep Values"