Selecting group in accordion list - angularjs

Question

I just started with Angular and I got a code sample from codepen Accordion List
I'm trying to use my data in the html like this:
<div class="group">
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(group)">
<div class="form-group">
<label></label>
<input>
</div>
</ion-item>
</div>
<div class="group">
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(group)">
<div class="form-group">
<label></label>
<input>
</div>
</ion-item>
and the JS is set like this:
angular.module('my-app',['ionic'])
.controller('main', function($scope) {
$scope.groups = [{
name: "Basic Info",
items: [1,2,3]},
{
name: "Torso Measures",
items: [1,2,3]},
{
name: "Extra measures",
items: [1,2,3,4,5],
}
];
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
};
$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
};
});
The problem is that whenever I click in 1 group, all of them expand / collapse. In JS / jQuery I'd pass an id but I think there is an "angular way" to do it. Could someone help me?

Answer 1

Demo without ng-repeat here.
Demo with ng-repeat here.
Why your code cant work:
Since you didn't use ng-repeat in your markup, group in these places
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(group)">
are both undefined.
You need init the group variable for toggleGroup(group),isGroupShown(group) and should be different name if used twice in same scope.Update your html:
<div class="group" ng-init="groupid1=1">
<ion-item class="item-stable" ng-click="toggleGroup(groupid1)" ng-class="{active: isGroupShown(groupid1)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(groupid1)">
<div class="form-group">
<label></label>
<input>
</div>
</ion-item>
</div>
<div class="group" ng-init="groupid2=2">
<ion-item class="item-stable" ng-click="toggleGroup(groupid2)" ng-class="{active: isGroupShown(groupid2)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(groupid2)">
<div class="form-group">
<label></label>
<input>
</div>
</ion-item>
</div>
However,By using ng-repeat, you can use your html with wrapped like this:
<div class="group" ng-repeat="group in groups track by $index">
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(group)">
<div class="form-group">
<label></label>
<input>
</div>
</ion-item>
</div>
It should works.

Answer 2

The fact that all your groups expand on click is probably because you have (in your snipet of code) two divs that uses the same group model.
I am talking about the group given in to your toggle function :
ng-click="toggleGroup(group)"
In the tutorial, the writter uses an ng-repeat directive to generate his divs
<div ng-repeat="group in groups">
this line goes in groups and take each item in groups member into a new group model. This could be why your accordions all expands,(and probably have the same content all of them). Could you give us a litle more co
If you want to use bootstrap accordion I can advise you to look at Angular-ui, an Angular module to replace bootstrap.js and make the same things in an Angular way (using directives, databinding....).