CODEWITHSUNDEEP
javascripthtmlangularjsangular-ui-router
tholo
tholo

Reputation: 541

$state.go doesn't pass parameters

This is the part of my HTML:

<td>
   <button class="btn btn-primary" ui-sref="edit({id: v.customerId})" ui-sref-opts="{reload: true}">Edit</button>
   <button class="btn btn-primary" ng-click="removeRow(v.firstName);">Delete</button>
</td>

as you can see I am passing the customerId as and id to be one of the parameters displayed in the url

app.js:

var app = angular.module('webtrekkApp', ['ngSanitize', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('edit', {
            name: 'edit',
            url: '/users/:id/edit',
            templateUrl: './views/customer-details.html',
            controller: 'ctrl',
            params: {
                obj: null
            }
        });
});

ctrl.js:

//If 'initData' isn't set, then set it up by default
    if(!localStorage.getItem('initData')) {
        $window.localStorage.setItem('initData', JSON.stringify($scope.initData));
    }
    $scope.retrievedData = JSON.parse($window.localStorage.getItem('initData'));
    for (var i = 0; i < $scope.retrievedData.length; i++) {
        $scope.retrievedData[i].birthdayDate = new Date().getFullYear() - new Date($scope.retrievedData[i].birthdayDate).getFullYear();
    }
    $scope.sortedType = 'firstName';
    $scope.sortedReverse = false;
    //Remove Rows and Update localStorage Key Values
    $scope.removeRow = function(name) {
        var index = $scope.retrievedData.findIndex(function(obj) {return obj.firstName === name});
        $scope.retrievedData.splice(index, 1);
        window.localStorage.setItem('initData', JSON.stringify($scope.retrievedData));
    };
    $state.go('edit', {obj: $scope.retrievedData});

So I a table, and when users clicks on 'edit', I need THAT object to be passed to the ui.router so I can display it in customer-details.html. How can I do it? I am doing something wrong here. I have read all the documentation on ui.router but do not know should $state.go be defined in the initial controller or in some other. Also I've followed this question, but couldn't get it to work: How to pass custom data in $state.go() in angular-ui-router?

Upvotes: 1

Views: 1659

Answers (2)

Karim
Karim

Reputation: 8652

In your edit state you have two parameters, id and obj, one of which inside the url.

But when you trigger the state from your controller you are not passing the id parameter and you did not define a default value

$state.go('edit', {obj: $scope.retrievedData});

try adding it inside your params object

params: {
   obj: null,
   id: null
}

EDIT:

to answer your further question:

<button class="btn btn-primary" ng-click="handleItem(v);">Go to Edit state</button>

$scope.handleItem = function(item){
 //here extract your item specific data from $scope.retrievedData then change the state
 var itemData = getItemData(item, $scope.retrieveData);
 $state.go('edit', {obj: itemData});
}

Upvotes: 2

raj peer
raj peer

Reputation: 728

Hi you are not using controller, if you want to pass parameters to $state.go() you should have controller to get that value in particular state.

app.js

var app = angular.module('webtrekkApp', ['ngSanitize', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('edit', {
            name: 'edit',
            url: '/users/:id/edit',
            templateUrl: './views/customer-details.html',
            controller: 'myController',
            params: {
                obj: null
            }
        });
});

in Controller

function myController($state) {
   conrole.log($state.params.obj);
}

Upvotes: 0

Related Questions