How to Inject Parameter From URL into HTML using AngularJs

Question

I am building an application (using express, node, and angular) that stores clients and has the ability to view their info. Each client is assigned an id key. I have created a link such that when the client's name is clicked, it goes to a url that is like so : client/{{client.id}}. I want to extract this parameter, id, so I can filter the clients and show only the one with that id. Here is my express.js, where I find the parameter id and print it in console:

// express stuff
app.param('id', function (req, res, next, id) {
console.log(req.params.id);
next();
});
app.get('/client/:id', routes.clientpage);

Now, I see the id printed in console log -- but, using Angular, how would I inject this parameter into a filter? This is what I think, but I evidently wrong :

<ng-repeat="client in clients | orderBy:'id' | filter:{id:{{$req.params.id}}} | limitTo: 1"/>

Answer 1

You can do it whi some url parsing expression like this:

//in controller
$scope.clientId = document.location.href.split('client/')[1];

//in template
<ng-repeat="client in clients | orderBy:'id' | filter:{id:clientId} | limitTo: 1"/>

That will work for urls like myapp.com/example/client/46235, but may fail for myapp.com/example/client/46235/getsmth so you may want to use other solutions:

• angular UI router for client side app naviagtion
• Output this ID in some part of you server generated template.