javascript - 使用 AngularJS 更改 URL 中的参数

Question

我希望单击存储在 postgresql 数据库中的客户端名称，然后将客户端的 id 值输入到 URL 中，而无需重新加载页面。这是我正在使用的带有 Angular 片段的 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>

我不确定如何在我的 Controller 中完成此操作。我知道我可能应该使用 $location，但我不知道如何在单击特定客户名称时提取 id 值并将其附加到 url 中。另外，我并不是试图进入另一个 View ，只是动态更新 URL 参数，以便我可以使用它来过滤数据。

Answer 1

您正在使用 ui-router或ng-route ？

无论如何，您都可以通过 $location 或 ng-href 进行移动，就像您现在所做的那样，因为 Angular 是为单页应用程序设计的。但需要在开头添加#。

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

但是如果你坚持用 $location 来调用它，你可以这样做:

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>