CODEWITHSUNDEEP
angularjsangular-ui-router
Pierpaolo Croce
Pierpaolo Croce

Reputation: 57

Angular UI-router new state based on user id

I'm using angular-ui-router to build a one page app. In my "cerca" state I have a table that show all user in my db. The last columns of any row contains a link to the i-th user. I would like to be able to click on this link and show a user page with all information about a specific user (maybe retrieved from db using user id). In my "cerca" state I have the ids of all users. I'm trying to use them to build a dynamic url but I have difficult to pass the id to the new state. This is my app.config:

app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
 $stateProvider
.state('home',{
    url:'/home',
    templateUrl: 'pages/home.html',
    controller: 'homeCtrl'
   })
 .state('inserisciP',{
    url:'/inserisciP',
    templateUrl: 'pages/inserisciPaziente.html',
    controller: 'inserisciController'
  })
  .state('cerca',{
    url:'/cerca',
    templateUrl:'pages/cercaPaziente.html',
    controller: 'cercaController'
  })
  .state('paziente',{
    url:'/paziente',
    templateUrl:'pages/paziente.html',
    controller: 'pazienteController'
  })
  .state('inserisciE',{
    url:'/inserisciE',
    templateUrl:'pages/inserisciEsame.html'
  })
 .state('listaLavoro',{
    url:'/listaLavoro',
    templateUrl:'pages/listaLavoro.html',
  })
 .state('refertazione',{
    url:'/refertazione',
    templateUrl:'pages/refertazione.html'
   })
.state('nomeUtente',{
    url:'/nomeUtente',
    templateUrl:'pages/nomeUtente.html'
})
.state('amministrazione',{
    url:'/amministrazione',
    templateUrl:'pages/amministrazione.html'
})
.state('richiestaRadiologia',{
    url:'/richiestaRadiologia',
    templateUrl:'pages/richiestaRadiologia.html'
})
.state('help',{
    url:'/help',
    templateUrl:'pages/help.html'
});

 });

and this is my table:

<tr ng-repeat="p in copiaTable">
  <td>{{p.id}}</td>
  <td>{{p.last_name}}</td>
  <td>{{p.first_name}}</td>
  <td>{{p.codice_fiscale}}</td>
  <td>{{p.phone_number}}</td>
  <td><a ui-sref="paziente">edit</a></td>
</tr>

I also tryed to create a service to share data between states... Any suggestion on how can I solve this issue with ui-router?

Upvotes: 1

Views: 1859

Answers (2)

Yaakov
Yaakov

Reputation: 184

The user data should be resolved like this:

state('userInfo', {
  url: 'user/:userId',
  templateUrl: 'userProfile.html',
  resolve: {
    user: function($stateParams, UserService) {
           return UserService.getUser($stateParams.userId);
          }
  }
});

Upvotes: 1

Chong Tang
Chong Tang

Reputation: 2146

You can pass a parameter to a state when you click the link. Let's say you want to pass an user ID. The code of the link would be like this:

<a ui-sref="paziente({userID: p.id})">edit</a>

In your route configuration file, you can define paziente state like this:

state('paziente',{
  url:'/paziente/:userID',
  templateUrl:'pages/paziente.html',
  controller: 'pazienteController'
})

With the passed ID, You can find an user from your factory.

Upvotes: 4

Related Questions