Change Parameter in URL Using AngularJS

Question

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 1

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>

Answer 2

To achieve expected use below

1. Syntax error-remove extra double quote in the line beside $index-
2. Creating sample working demo with clients json object, as mentioned in comments that it is strictly with in the same view, so i have create only one page with getting id from the row from any table

HTML:

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">

<div  ng-controller="myCtrl">

  <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">
           <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>

  </div>

</body>
</html>

JS:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.clients=[{
      "id":"1",
      "name":"aa",
      "lastcall":"11"
    },{
      "id":"2",
      "name":"bb",
      "lastcall":"22"
    }];
});

Working Demo:

Codepen- http://codepen.io/nagasai/pen/VjRpbB