use ui-sref only if the parameter is defined

Question

Here is my following code:

view:

<div class="single-user" ui-sref-active="activeState" ui-sref="app.usersingle({id:item[0].id})">    
    <li class="userTicket">Total: {{item[0].nbtickets}}</li>
</div>

and in app.js:

 .state('app.usersingle',{
            url:"/user:id",
            templateUrl: "views/single_user.html",
            controller:"userCtrl",
            reloadOnSearch:true
        })

I would like to be able to click on my div only if item[0].id is defined (from my ui-sref ). How can i do this. Because when the item[0].id is not defined it load the next page with errrors. What i want is just that when item[0].id is not defined it just stay in the page and do nothing. Is that clear explanation ?

Answer 1

You could do conditional stuff over ui-sref itself, where you could redirect to other state when Id is present other redirect to other state .

ui-sref="{{ item[0].id ? 'app.usersingle({id:item[0].id})': '.'}}"

Took a reference from this answer