Question

我希望点击客户端的名称，该名称存储在postgresql数据库中，然后将客户端的id值输入到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以与现在相同的方式移动，因为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>

Answer 2

要达到预期用途

语法错误 - 删除$ index-
使用客户端json对象创建示例工作演示，正如在相同视图中严格使用的注释中所述，所以我只创建了一个页面，从任何表中的行获取id

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

使用AngularJS更改URL中的参数

2 个答案: