Hi there!
I’m trying to load a childview but it’s empty. I’m using accordion list.
My code is like this:
UPDATE:
i solved it with a workaround by saving the items of the accordion lsit in an array and declared two views one for each arrays that contain books. thread can be deleted.
app.js
.angular.module(‘starter’, [‘ionic’, ‘ionic.service.core’, ‘pascalprecht.translate’, ‘starter.controllers’, ‘starter.factories’, ‘starter.directives’, ‘starter.services’])
.run(function ($ionicPlatform, $ionicLoading, $ionicPopup) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
...
});
})
.config(function ($translateProvider, $stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
...
.state('app.books', {
url: '/books',
views: {
'menuContent': {
templateUrl: 'templates/books.html',
controller: 'BooksCtrl'
}
}
})
.state('app.book-detail', {
url: '/books/:bookId',
views: {
'menuContent': {
templateUrl: 'templates/book-detail.html',
controller: 'BookDetailCtrl'
}
}
});
if(localStorage.getItem('isLogged') == 'yes') {
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/books');
} else {
$urlRouterProvider.otherwise('/login');
}
});`
services.js
angular.module(‘starter.services’, [])
.factory(‘BooksDe’, function() {
var booksDe = [
{
id: 0,
name: "Gebetsbuch",
cover: "img/gebetsbuchappde.png",
items: [{
id: 0,
name: "1- Testbedingungen",
content: "Test Test"
},
{
id: 1,
name: "2- Test 2",
content: "Test 2 Test 2"
}]
},
{
id: 1,
name: "Hadj Reiseführer",
cover: "img/reisefuhrerapptr.png",
items: [{
id: 2,
name: "1- Reisebedingungen",
content: "TestTestTest"
},
{
id: 3,
name: "2- Tipps zur Gesundheit",
content: "Bla Bla Bla Bla Bla"
}]
},
{
id: 2,
name: "Hadj Reiseführer",
cover: "img/reisefuhrerappde.png",
items: [{
id: 4,
name: "1- Testbedingungen",
content: "Test Test"
},
{
id: 5,
name: "2- Test 2",
content: "Test 2 Test 2"
}]
}];
return {
all: function() {
return booksDe;
},
get: function(bookId) {
for (var i = 0; i < booksDe.length; i++) {
if (booksDe[i].id === parseInt(bookId)) {
return booksDe[i];
}
}
return null;
}
};
});
books.html
<ion-list ng-if="!showBook">
<div ng-repeat="book in booksDe">
<ion-item class="item-stable item-icon-right" ng-click="toggleGroup(book)" ng-class="{active: isGroupShown(book)}">
<img ng-src={{book.cover}} style="width: 70px;">
<i class="icon" ng-class="isGroupShown(book) ? 'ion-minus' : 'ion-plus'"></i> {{book.name}}
</ion-item>
<ion-item class="item-accordion item-text-wrap item-icon-right" ng-repeat="item in book.items" ng-show="isGroupShown(book)" ng-href="#/app/books/{{item.id}}">
{{item.name}}
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</div>
</ion-list>
</ion-content>
book-detail.html
<'ion-view view-title="{{ item.name }}">
<ion-content class="padding">
<p>
{{item.content}}
</p>
</ion-content>
<’/ion-view>
If i click on a accordion list item, toggle gets true and the items array in my services.js is listet. But if i click on one of the items with href (the toggled elements), i get to the child view (book_detail) but it’s empty. Any help is appreciated.