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)}">
<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;
}