Master/detail with

ionic-v1
1

Hey guys,

I’m new to ionic and trying to put together an app with nested json that populates an accordion list. So far, I can populate the accordion but I want to have the user click on one of the items that takes them to a details page. The json I am trying to process looks like:

{
   "Items": [
   {
      "Name": "Item 1",
      "Number: 1
      "Subcategories": [
       {
          "Name": Sub Item 1"
          "Description": "A description about the item..."
       }
          "Name": Sub Item 2"
          "Description": "A description about the item..."  
       }    
       }
          "Name": Sub Item 3"
          "Description": "A description about the item..."  
       }    
   }
}

As mentioned, I can populate the accordion list with an ion list with ng-repeat=“item in items” and the expanded accordion with ng-repeat=“name in item.subcategories”.

I am having trouble however in populating the detail page where it would list the name of the sub item along with the description.

Is anyone able to please point me in the right direction? I have tried following a few tutorials but all seem to point to different solutions. I understand I might need to create a ng-click with a call to a controller function but am stuck with exactly what I need to create.

Many thanks in advance.

2

Can you post your code?

3

Can you paste your code to codepen?

According to your first paragraph,I believe you should check out the stateParams for angular ui-router, it may help you to bring parameters from state to state.

According to your second paragraph, you should not only use “name” after the ng-repeat, you should use name.name. For example:

<div ng-repeat="name in item.subcategories">
{{name}}  //this is indeed the whole object
{{name.name}} //this is what you want
{{name.description}}  //this is the description
</div>

The problem is that the “xxx in item.subcategories”, the “xxx” here is only an alias for you to call in the following content, so it is just all the single objects that contains both name and description. You can name it in a better way for no further confusion.

Hope this helps.

4

Thanks. I’ll upload to codepen when I get home (I’m at work at the moment).

5

So, I’ve cut out the relevant bits of the code here - http://codepen.io/anon/pen/myxrzy

The HTML I’ve copied belongs to the tab where I am trying to output the information. The list is in the form of an accordion so I can get:

Item 1
- Sub Item 1
- Sub Item 2
- Sub Item 3
Item 2
- Sub Item 1
- Sub Item 2
- Sub Item 3

I also have an app.js that lists the state of the tab and attempting to display the tab from the details page. Sorry for including this here and not the codepen, I wasn’t sure if I should paste this under the JS frame.

  .state('tab.items', {
    url:'/items',
    views: {
      'tab-home': {
        templateUrl: 'templates/tab-items.html',
      }
    }
  })
  .state('tab.itemDetail', {
    url:'/:name',
    views: {
      'tab-home': {
        templateUrl: 'templates/item-detail.html',
        controller: 'nestedJsonCtrl'
      }
    }
  })

It is worth mentioning that everything else works, my other tabs, the accordion etc, just not the loading of the details page.

Is this enough information?

Thanks again.

6

I don’t find apparent errors in these code. Consider the following:

  1. Have you checked your consoles? Are there any errors showing when transitioning states?

  2. Are you trying to get to another states using urls?

You can inject $state to your controllers, then use

$state.go('tab.itemDetail',{name:itemName}};

to get to the detail page. Directly using urls may be misread by angular because they are all in the format of “/xxx”.

If you still want to using urls, make the itemDetail url into a more complex one such as “item/detail/:name”.

Try and ask if there are any further problems!

7

Thanks for your help!

In my onSelectItems function, what should I set the $location.url to? Should it just be the detail html page? I think this is where I may be getting confused.

8

Alright, I’m a idiot here. I updated to $state.go and can get to my itemDetail page. The next step is actually displaying the subitem description. Do I need to do anything special in my itemDetails page? How do I extend the state to this page?

Thanks again.