How to parse and use a json object passed from parent page?

Question

I apologize in advance if this has already been answered. I've Googled around for a few hours now, and I still haven't found anything that seems to answer my exact question.

Here is my code:

<ion-content>
    <div class="list">
        <div style="padding: 0px; margin: 0px;" class="item">
            <div class="row"
                 ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
                <div class="col left">
                    {{x.order_id}}
                </div>                                                  
                <div class="col left">
                    <a ng-href="#/tab/orderdetails?detail={{x.detail}}">订单详情</a>
                </div>
            </div>
        </div>
    </div>                        
</ion-content>

x.detail is the json object i want to pass to the newly opened page "orderdetails.html":

<script id="templates/orderdetails.html" type="text/ng-template">
    <ion-view view-title="OrderDetails">
        <ion-content class="padding">

            <p>Here I want to display order details...</p>

            var obj = this.href.split('?')[1];
            console.log(obj);

            <p>
                <a class="button icon ion-home" href="#/tab/home"> Home</a>
            </p>
        </ion-content>
    </ion-view>
</script>

app.js:

.state('tabs.orderdetails', {
      url: "/orderdetails",
      views: {
        'home-tab': {
          templateUrl: "templates/orderdetails.html"
        }
      }
    })

I want to know how to parse and use the passed object in "orderdetails.html". Thanks.

@skubski, thanks for your concerns. I'm new to angularjs, could you show me how to use it? — Isaac Li, Aug 28 '15 at 06:14
[Here](http://stackoverflow.com/questions/25647454/how-to-pass-parameters-using-ui-sref-in-ui-router-to-controller) is an excellent answer to a similar question. — skubski, Aug 28 '15 at 06:22
here comes another question~ http://stackoverflow.com/questions/32267106/how-to-use-javascript-inside-a-page-with-type-text-ng-template — Isaac Li, Aug 28 '15 at 08:58

Swapnil Shende · Answer 1 · 2015-08-28T06:44:04.460

0

You can just pass the data as state params like this below.

<ion-content>
                    <div class="list">
                        <div style="padding: 0px; margin: 0px;" class="item">
                            <div class="row"
                                 ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
                                <div class="col left">
                                    {{x.order_id}}
                                </div>                                                  <div class="col left">
                                    <a ng-href="#/tab/orderdetails/{{x.detail}}">订单详情</a>
                                </div>
                             </div>
                        </div>
                    </div>                        
           </ion-content>

and recieve it in state params like this below.

.state('tabs.orderdetails', {
      url: "/orderdetails/:whateverdata",
      views: {
        'home-tab': {
          templateUrl: "templates/orderdetails.html"
        }
      }
    })

you will get the data in your controller for orderdetails tab as $stateParams.whateverdata

edited Aug 28 '15 at 06:44

answered Aug 28 '15 at 06:18

Swapnil Shende

305
1
5
17

Update your answer with how to use ui-sref and how to get the data in the controller using $stateParams in order to fully answer. – skubski Aug 28 '15 at 06:24
@skubski as i have stated whatever we pass as state params in the href we have to specify it in the state url( in this case whateverdata is the variable) now the controller which run for tabs.orderdetails you can just use $stateParams.whateverdata. – Swapnil Shende Aug 28 '15 at 06:31
@Swapnil Shende, thanks for your concerns, but when i follow your step, the link didn't work(page can't be opened) – Isaac Li Aug 28 '15 at 06:35
@IsaacLi I had copied the wrong code. I have edited it now. This should work – Swapnil Shende Aug 28 '15 at 06:39
@IsaacLi what error does it give. was it working earlier. And have you injected $stateParams in your controller. Else can you create a fiddle. – Swapnil Shende Aug 28 '15 at 06:45
@Swapnil Shende, no error gives. it was working earlier. `.state('tabs.orderdetails', { url: "/orderdetails/:orderdetail", views: { 'home-tab': { templateUrl: "templates/orderdetails.html", controller: function ($scope) { $scope.orderdetail = orderdetail; } } } })` I've not used fiddle before. I'll have a try. – Isaac Li Aug 28 '15 at 06:51
@IsaacLi try using .state('tabs.orderdetails', { url: "/orderdetails/:orderdetail", views: { 'tab-home': { templateUrl: "templates/orderdetails.html", controller: function ($scope) { $scope.orderdetail = orderdetail; } } } }) insead of home-tab. Not sure but may be because of this. – Swapnil Shende Aug 28 '15 at 06:56
@IsaacLi we can take a chat for this – Swapnil Shende Aug 28 '15 at 07:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/88159/discussion-between-swapnil-shende-and-isaac-li). – Swapnil Shende Aug 28 '15 at 07:17

How to parse and use a json object passed from parent page?

1 Answers1