Help with accordion list


#1

I’m trying to make an app using the api from TMBD. Right now on the home page, I’m displaying movies that are currently in theaters, or being released soon. I want to implement a feature so that when you click on the movie, the item in the list expands and shows you information about the movie. I have it working somewhat. When the items are expanded, the information is being shown, but when I start the app all of the items start out as being expanded, and I can’t control them individually; when I toggle one, all of them either expand or decrease at the same time. Can anyone help me out? Heres my code:

index.html

<!DOCTYPE html>
<html lang="en" ng-app="Fapp">

<head>
    <meta charset="UTF-8">
    <title>flix</title>

    <!--setup ionic/cordova-->

    <script src="cordova.js"></script>
    <meta http-quiv="Content-Security-Policy" content="default-src *;">


    <!--Setup Ionic-->
    <link rel="stylesheet" href="lib/ionic/css/ionic.css">
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!--Setup App-->
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>



</head>

<body ng-controller="Fctrl">
    <ion-pane>

        <ion-tabs class="tabs-positive">
            <ion-tab title="New" icon-on="ion-ios-film" icon-off="ion-ios-film-outline">

                <ion-header-bar align-title="center" class="bar-positive">
                    <h1 class="title">New Releases</h1>

                </ion-header-bar>

                <ion-content class="bg">

                    <ion-list>


                        <div ng-repeat="m in movies">
                            <ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}">
                                &nbsp;
                                <h1>{{m.name}} </h1>
                                <h2>{{m.date}} </h2>
                            </ion-item>
                            <ion-item class="item-accordion" ng-show="isGroupShown(group)">
                                <h2>{{m.info}}</h2>
                            </ion-item>

                        </div>


                    </ion-list>


                </ion-content>

            </ion-tab>


            <ion-tab title="Search" icon-on="ion-ios-search-strong" icon-off="ion-ios-search">

                <ion-header-bar align-title="center" class="bar-positive">
                    <h1 class="title">Search</h1>

                </ion-header-bar>

                <ion-content class="bg">



                </ion-content>



            </ion-tab>

            <ion-tab title="Watch List" icon-on="ion-ios-list" icon-off="ion-ios-list-outline">


                <ion-header-bar align-title="center" class="bar-positive">
                    <h1 class="title">Watchlist</h1>

                </ion-header-bar>

                <ion-content class="bg" class="has-header">

                    <p>Add Movies to your Watchlist!</p>
                </ion-content>

            </ion-tab>
            <ion-tab title="About" icon-on="ion-ios-help" icon-off="ion-ios-help-outline">

                <ion-header-bar align-title="center" class="bar-positive">
                    <h1 class="title">About flix</h1>

                </ion-header-bar>

                <ion-content class="bg" class="has-header">
                    <p>flix is a simple movie app where you can quickly get information on new movies, and look up information about old favorites.
                    </p>
                    <br>
                    <br>
                    <br>
                    <br>
                    <p>Movie information provided by TMDB using the TMDB API</p>
                </ion-content>

            </ion-tab>

        </ion-tabs>


    </ion-pane>

</body>

</html>

index.js

var Fapp = angular.module("Fapp", ["ionic"]);

Fapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {

    $ionicConfigProvider.tabs.position('bottom'); // other values: top

}]);

Fapp.service("Fsvc", ["$http", "$rootScope", Fsvc]);

Fapp.controller("Fctrl", ["$scope", "$ionicLoading", "Fsvc", Fctrl]);

function Fctrl($scope, $ionicLoading, Fsvc) {

	$ionicLoading.show({template: "Loading Movies..."});
	$scope.movies = [];
	$scope.$on("Fapp.movies", function(_, result) {
		result.results.forEach(function(m) {
			$scope.movies.push({
				name: m.title,
				date: m.release_date,
				info: m.overview
			});
		});

		$ionicLoading.hide();
	});

	Fsvc.loadMovies();




	$scope.toggleGroup = function(group) {
    if ($scope.isGroupShown(group)) {
      $scope.shownGroup = null;
    } else {
      $scope.shownGroup = group;
    }
  };
  $scope.isGroupShown = function(group) {
    return $scope.shownGroup === group;
  };


}

index.css

.has-header {
  top: 44px;
  position:absolute;
  width: 100%;
}

h1{
	font-size: 150%;
	font-style: bold;
	font-family: "futura";
}






.list .item.item-accordion {
  line-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  transition: 0.09s all linear;
}
.list .item.item-accordion.ng-hide {
  line-height: 0px;
}
.list .item.item-accordion.ng-hide-add,
.list .item.item-accordion.ng-hide-remove {
  display: block !important;
}