Search code examples
angularjsangularjs-scopeangular-ui-routerangularjs-routing

Give URL with ID in Angular UI Router


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});

};

Solution

  • 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>