Angular Pages with QueryString

Question

I want to create an event page and event detail page in angular. I created my states like this in my app.js

.state('app.event', {
    url: "/event",
    views: {
        'menuContent': {
            templateUrl: "views/event.html",
            controller: "eventController"
        }
    }
})

.state('app.eventDetail', {
    url: "/eventDetail/:eventId",
    views: {
        'menuContent': {
            templateUrl: "views/eventDetail.html",
            controller: "eventDetailController"
        }
    }
})

I m getting my events in my views/event.html page like this

<div class="list" ng-controller="EventController">
<div class="item item-avatar item-left"  ng-repeat="EventName in Events track by $index">

            <p>{{ EventName }}</p>
            <p>{{ EventId }}</p>

        </div>
    </div>

My question is how can i redirect my Event page to EventDetail page with event Id ?

And my other question is how can i get that id in my EventDetail page ?

Answer 1

You could use ui-sref like this:

<div class="list" ng-controller="EventController">
    <div class="item item-avatar item-left"  ng-repeat="EventName in Events track by $index">                
        <a ui-sref="app.eventDetail({eventId: EventId})">{{ EventName }}</a>     
    </div>
</div>

Clicking the link for an event should redirect to the details page and then to get the parameter from the url you would use the $stateParams service:

app.controller('eventDetailController', function($scope, $stateParams) {
    $stateParams.eventId;
});

I suspect that there may be a few errors in your code. So if you experience any issues with the above, please update your question with the code for both controllers and I'll try to update my answer to account for them.