Ionic dynamic href Angular JS click event

Question

So, I have a list of items in an Ionic framework project, like this:

 <a ng-repeat="item in items" href="#/item/{{item.id}}" ng-click="clicker(item)" class="item item-thumbnail-left">

Being a noob in AngularJS, I don't know how to generate random states using state providers. Urls look like this: /item/1, /item/2, /item/3, etc.

What am I trying to achieve:

define a template
load some content in that template, dynamically (for each item, i have different content)

Is this possible? If so, how?

Do you mean "dynamic content" as the data from an AJAX call based on the id or just static HTML files? — Shashank Agrawal
– Shashank Agrawal, Commented Oct 10, 2015 at 14:43
@ShashankAgrawal For the moment that's not important. I'm trying to just open a new "page" when i click a list item. After that, passing the id must be easy, i guess. Right now just static html files — Matei
– Matei, Commented Oct 10, 2015 at 14:44

Shashank Agrawal · Accepted Answer · 2015-10-10 14:47:32Z

1

Yes, it's absolutely possible. First take a bit look about defining state and using state manager https://github.com/angular-ui/ui-router/wiki

Now, define a state like:

.state('itemView', {
    url: '/item/:id',
    templateUrl : function($stateParams) {
        // Your path to the view
        return 'views/items/display' + $stateParams.id + '.html';
    }
})

Now your click on anchor link should render the page based on the id considering you have static HTML files named as views/items/display1.html

answered Oct 10, 2015 at 14:47

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matei Over a year ago

Thank you. The page is not rendering, but I understood the idea. Clicking on an item right now, does nothing.

Shashank Agrawal Over a year ago

Glad this helps! The documentation of ui-router is pretty good. Please try to read it from the start, you will definitely make your page running.

Collectives™ on Stack Overflow

Ionic dynamic href Angular JS click event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related