Johnathan Mackney Johnathan Mackney - 3 months ago 5
Javascript Question

Change Parameter in URL Using AngularJS

I am looking to click on a client's name, which is stored in a postgresql db, and then having the client's id value entered into URL without reloading page. Here is the html with angular snippet that I am using:

<form class="form-inline">
<input style="width:100%" ng-model="query" type="text" placeholder="Search Through {{clients.length}} Clients" autofocus>
</form>
<div class="container1">
<div style="max-width:100%; border-width: medium; border-style: solid; border-color: gray" class="datagrid">
<table>
<thead>
<tr>
<th> ID </th>
<th> Name </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="client in clients | filter: query | orderBy :'id' track by $index">
<td>
{{client.id}}
</td>
<td>
<a ng-href = "client/{{client.id}}"><span style="color:#0000FF"> {{client.name}}</span></a> | <a ng-href = "docgen/{{client.id}}">Letters</a> | <a ng-href = "callog/{{client.id}}">{{client.lastcall}}</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>


I am not sure how to complete this in my controller. I know I probably should use $location, but I do not know how to get angular to, on a click of specific client's name, pull the id value and append it to url. Also, I am not trying to go to another view, simply dynamically update the URL Parameter so I can use it for filtering of data.

Answer

Are you using ui-router or ng-route?

Well in any case you can move via $location or with ng-href the same way you are doing now since angular is designed for single page apps. But you need to add the # at the beggining.

<form class="form-inline">
    <input style="width:100%" ng-model="query" type="text" placeholder="Search Through {{clients.length}} Clients" autofocus>
</form>
<div class="container1">
    <div style="max-width:100%; border-width: medium; border-style: solid; border-color: gray" class="datagrid">
        <table>
            <thead>
                <tr>
                    <th> ID </th>
                    <th> Name </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="client in clients | filter: query | orderBy :'id' track by $index">
                    <td>
                        {{client.id}}
                    </td>
                    <td>
                        <a ng-href="#/client/{{client.id}} "><span style="color:#0000FF "> {{client.name}}</span></a> | <a ng-href="#/docgen/{{client.id}} ">Letters</a> | <a ng-href="#/callog/{{client.id}} ">{{client.lastcall}}</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

But if you insist on calling it with $location you can do something like:

angular.module('app')
.controller('FooCtrl', function ($scope, $location) {
  $scope.goToClientDetail = function(client) {
    $location.path('/client/'+client.id);
  };
  $scope.goToDocGen = function(client) {
    $location.path('/docgen/'+client.id);
  };
  $scope.goToCallog = function(client) {
    $location.path('/callog/'+client.id);
  };
});

and your html be like

<form class="form-inline">
    <input style="width:100%" ng-model="query" type="text" placeholder="Search Through {{clients.length}} Clients" autofocus>
</form>
<div class="container1">
    <div style="max-width:100%; border-width: medium; border-style: solid; border-color: gray" class="datagrid">
        <table>
            <thead>
                <tr>
                    <th> ID </th>
                    <th> Name </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="client in clients | filter: query | orderBy :'id' track by $index">
                    <td>
                        {{client.id}}
                    </td>
                    <td>
                        <a ng-click="goToClientDetail(client)"><span style="color:#0000FF "> {{client.name}}</span></a> | <a ng-click="goToDocGen(client)">Letters</a> | <a ng-click="goToCallog(client)">{{client.lastcall}}</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>