How to show item from json Array one by one after every button click

ionic-v1
1

I am developing one prototype application in ionic framework. I am newbie for angular js, HTML, CSS , Java Script and all this stuff.

I have one json file which I am using as a input. I am able to parse this Json file and able to get json object from this. This json object contains array of items. You can refer below json content for this. Here items are application A,B…etc

input json

{"data": [
    {
        "applicationname": "A",
        "permissions": [
            {
                "text": "A_T",
                "details": "A_D"
            },
            {
                "text": "A_t1",
                "details": "A_d1"
            }
        ]
    },
    {
        "applicationname": "B",
        "permissions": [
            {
                "text": "B_T",
                "details": "B_D"
            },
            {
                "text": "B_t1",
                "details": "B_d1"
            }
        ]
    }
]
}

First time when application start at that time I want to load only first item data from above json array that means only “A” (first item) data.

Once user click on any buttons (install/cancel) from Footer then it should changed its data and display application “B”'s contents. This process should continue till end json array.

My current code is working fine for only one item (A’s application only).

Code :

http://codepen.io/skpatel/pen/eNMjJR

Sample data image : When I click on Install/Click then second item from “data” json array should be loaded. In same layout 2nd item data should be loaded. (Application B’s data)

image
Selection_007.png376×669 9.58 KB

Please help me, thanks in advance.

2

So are you trying to change the content you are showing from A to B when they click (switch the content) or to keep adding it?
If you are switching you should just set those values with ng-bind so they update when you change them and override the content of A by B. If you are trying to add, I would put an ng-repeat list fetching from an array (ex. contentToShow) where you just push items each time they click a button.

Also had a look at your codePen, sorry but I couldn’t get much. The CSS tab is for styles, not for data, and I got lost in those controllers.

3

Yes I wanted to do the same. I am very new in these all stuff. I do not know from where I can start.

Can you please check my update code in my codePen now.

input Json 

 {
    "data": [
        {
            "applicationname": "A",
            "permissions": [
                {
                    "text": "A_T",
                    "details": "A_D"
                },
                {
                    "text": "A_t1",
                    "details": "A_d1"
                }
            ]
        },
        {
            "applicationname": "B",
            "permissions": [
                {
                    "text": "B_T",
                    "details": "B_D"
                },
                {
                    "text": "B_t1",
                    "details": "B_d1"
                }
            ]
        }
    ]
}

Why I am not able to see data. something I have done wrong in HTML. I know by doing this I am able to see only first item data which is A. I will do later something by click and all.

Looking for your reply soon

thanks