Изменение параметра в URL-адресе Использование AngularJS

Question

Я хочу щелкнуть имя клиента, которое хранится в db postgresql, а затем значение идентификатора клиента, введенное в URL-адрес без перегрузки. Вот HTML с угловой фрагмент, который я использую:

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

Я не знаю, как закончить это в моем контроллере. Я знаю, что я, вероятно, должен использовать $ location, но я не знаю, как получить угловой, щелкнув по имени конкретного клиента, вытащить значение id и добавить его в url. Кроме того, я не пытаюсь перейти к другому представлению, просто динамически обновляю параметр URL, чтобы использовать его для фильтрации данных.

Answer 1

Вы используете ui-router или ng-route?

Ну, в любом случае вы можете перемещаться через $ location или с помощью ng-href так же, как и сейчас, поскольку угловые предназначены для приложений с одной страницей. Но вам нужно добавить # в начале.

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

Но если вы настаиваете на вызове его с $ месте вы можете сделать что-то вроде:

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); 
    }; 
}); 

и ваш HTML быть как

<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

Для достижения ожидаемого использования ниже

1. Ошибка синтаксиса - удалить дополнительную двойную кавычку в line рядом с $ index-
2. Создание образца рабочей демонстрации с помощью клиента json object, как указано в комментариях, что это строго в одном представлении, поэтому я создал только одну страницу с получением идентификатора из строки из любой таблицы

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" 
    }]; 
}); 

Рабочая Демонстрационный:

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