AngularJS ui router parameters

Question

So I'm making an app in Ionic and it contains some basic dynamic text from online admin site. I've managed to get this data into app trough json and now I'd like to create dynamic links (or states) in my app. The thing is that I have a list of some substances and each of that substances contains different info. So right now I have a list of these substances and when I click on a specific substance I'd need it to go to a different state, which would show all the info of this specific substance.

Here's the code that I have so far:

database:

 substances: [
  {
    sID: 'int',
    sTITLE: 'Some title 1',
    sINFO: 'some info 1',
  },
  {
    sID: 'int',
    sTITLE: 'Some title 2',
    sINFO: 'some info 2',
  },
  .....
 ]

app.js

  .state('substances', {
            url: "/substances",
            templateUrl: "templates/substances.html",
            controller: 'SubstancesCtrl'
        })

  .state('substanceDetails', {
            url: "/substanceDetails",
            templateUrl: "templates/substanceDetails.html",
            controller: 'substanceDetailsController'
        })

controllers.js

 .controller('SubstancesCtrl', function ($scope, $stateParams, $rootScope, $http) {


    $http.get('http://someurladdress.php?type=json')
        .success(function (data) {

            $scope.substances = data;

        })
        .error(function (response) {
            $scope.message = "Error";

        });

})

substances.html

 <ul class="list">

        <li ng-repeat="sID in substances" class="item ">
            <a ui-sref="substanceDetails({sID:substances.sID})">
                {{sID.sTITLE}}
            </a>
        </li>

    </ul>

If you do not wish to specify your parameter in your link, you should probably use something like this: .state('substanceDetails', { url: "/substanceDetails", params: { sID: null }, templateUrl: 'templates/substanceDetails.html' }) Check the following link for more infos https://github.com/angular-ui/ui-router/wiki/URL-Routing — Eirini Graonidou, Nov 02 '16 at 16:27

Ethan May · Answer 1 · 2016-11-17T19:04:32.463

0

This should work for you in app.js:

.state('substanceDetails', {
    url: "/substanceDetails/:sID", // added :sID for dynamic ID param
    // url: "/substanceDetails?sID" you could also add sID as a query string
    templateUrl: "templates/substanceDetails.html",
    controller: 'substanceDetailsController'
})

Then your ui-sref in substances.html will append the sID to the url, and you will be able to access that ID in your controller in $stateParams.

There were a few things you are doing wrong in your ng-repeat as well. Please take a look at this example I created for you, it does what you need.

edited Nov 17 '16 at 19:04

answered Nov 02 '16 at 19:21

Ethan May

1,172
10
16

Thank you Ethan May for your answer, but I got it till here... it is the $stateParams that is causing me problems, because I don't know how to work from there on... – SandraK Nov 03 '16 at 11:08
You need to create a SubstanceDetailsController, then you can use `$stateParams` inside of that controller to view the parameters you pass into the state. Look at the answer on this thread for more info on how to pass parameters to your controllers using `$stateParams`: http://stackoverflow.com/questions/25647454/how-to-pass-parameters-using-ui-sref-in-ui-router-to-controller – Ethan May Nov 03 '16 at 14:43
Thank you again for your answer, but I just can't find what am I doing wrong, because it just doesn't work. – SandraK Nov 17 '16 at 18:10
@SandraK I have updated my answer with a working example. Hope that helps! – Ethan May Nov 17 '16 at 19:04
Ethan thank you so much for your help and patience, and i know that I'm super close, but I think that I just can't get it straight with the id's thing. So if you could just bare with me this one last time, and point exactly what am I missing here? I'll paste the original code that I'm working with) and I'll paste my code in new answer. – SandraK Nov 18 '16 at 14:48
@SandraK if this helped you, would you mind accepting it as the answer? :) – Ethan May Dec 11 '16 at 17:17

AngularJS ui router parameters

1 Answers1