Give URL with ID in Angular UI Router

Question

I have a problem, when I edited data, my url not showing id example : /answer/1 or /answer/2 or /answer/3 etc. Im confused because Im using UI ROUTER I'm a beginner use UI ROUTER angularjs. Can you help me ? What should I do ? Thanks

My routing code :

.state({
    name: 'answer',
    url : '/answer/',
    params : {
                obj : null  
    },
    controller: 'answer-controller',
    templateUrl: 'templates/table-answer.html'
})

ng-click go to table-answer :

<button type="button" class="btn btn-default" ng-click="ListAnswer(data.item)"><i class="fa fa-eye"></i> View Answer</button>

Pass params $scope.ListAnswer into answer-controller.js

$scope.ListAnswer = function(data) {

    $state.go('answer', {obj : data});

};

Surjeet Bhadauriya · Accepted Answer · 2017-02-28T07:55:39.240

4

It's quite simple. Only one thing you missed there, otherwise your code is right.

.state({
  name: 'answer',
  url : '/answer/{answerId}',
  params : {
    obj : null  
  },
  controller: 'answer-controller',
  templateUrl: 'templates/table-answer.html'
})

Now there are two ways to go over that state.

//Html

<button type="button" class="btn btn-default" ng-click="ListAnswer(data.answerId)"><i class="fa fa-eye"></i> View Answer</button>

//Controller

$scope.ListAnswer = function(answerId) {
    $state.go('answer', {answerId: answerId});
};

OR

<button type="button" class="btn btn-default" ui-sref="answer({answerId: data.answerId})"><i class="fa fa-eye"></i> View Answer</button>

edited Feb 28 '17 at 07:55

answered Feb 27 '17 at 09:49

Surjeet Bhadauriya

6,755
3
34
52

{obj : data} --> send response to answer.controller.js and used them. If I use {obj : answerID} , how my response data can use or I should use data and answerID ? – userpr Feb 27 '17 at 12:53
Because {obj : data} is very important – userpr Feb 27 '17 at 12:54
Can I use two params ? like {obj : data} and {obj : data.answerId} – userpr Feb 28 '17 at 02:52
because {obj : data} to show table and I should to use that response – userpr Feb 28 '17 at 02:55
Why to send whole data in the params as you can fetch data with the params you passed. So just pass the unique ids and use them to fetch data in the controller. – Surjeet Bhadauriya Feb 28 '17 at 07:09
Yes, i understand. Its working in my code, thanks :) – userpr Feb 28 '17 at 07:44
@SurjeetBhadauriya How will I fetch all information from ID $stateparam . this is how I am passing ID `ui-sref="env({itemId: env.ID})"` . Now I want to show whole of env response in other state. From here I am able to pass ID only. – WhoAmI May 29 '18 at 13:10
Yes, you can access it inside the controller using $stateParams(Also Inject it). Here is the code => $stateParams.itemId. This will give you your env.ID. And yes if you want to use it inside HTML then assigned it to $scope variable. – Surjeet Bhadauriya May 30 '18 at 09:55

score 1 · Answer 2 · answered Feb 27 '17 at 09:32

1

Your state needs altering slightly:

.state({
  name: 'answer',
  url : '/answer/{itemId}',
  params : {
    obj : null  
  },
  controller: 'answer-controller',
  templateUrl: 'templates/table-answer.html'
})

Change your code slightly to pass along the id in the url of links:

<button type="button" class="btn btn-default" 
  ui-sref="answer({itemId: id})">

If you want to access the parameter from your controller however, you'll have to use $stateParams, so in this case, $stateParams.itemId

answered Feb 27 '17 at 09:32

rrd

5,789
3
28
36

Thanks for your answer but can ui-sref give more than one params ? – userpr Feb 27 '17 at 12:55
Yes, you can pass more than one params in ui-sref. Here is an example: ui-sref="answer({itemId: id, itemName: name}) – Surjeet Bhadauriya Feb 28 '17 at 06:56

Give URL with ID in Angular UI Router

2 Answers2

Linked