如何在搜索字段上设置和获取 URL 参数答案

【问题标题】：how to set and get URL parameters on a search field如何在搜索字段上设置和获取 URL 参数
【发布时间】：2015-10-26 07:59:31
【问题描述】：

我将如何设置http://staging.api.sample.com/events.json?name=peter和http://staging.api.sample.com/events.json?start_date_from=2015-01-01的URL参数。并将其设置为搜索按钮？就像如果您键入名称“peter”，然后如果您要单击按钮，则 URL 将加载为给定的 URL 名称“Peter”，那么它将在事件表中显示所有名为“Peter”的列表。 json 。搜索字段类似于名称和开始日期。如果您在搜索字段“名称”中输入名称 Peter，那么您在“开始日期”中输入名称，例如 2015-01-01。该链接将像“HTTP blah blah /events.json?name=peter&&start_date_from=2015-01-01”一样组合并搜索它是否与 events.json 匹配桌子。很有趣吧？任何人都可以帮我处理它吗？有什么建议？代码如下：

  <!DOCTYPE html>
<html ng-app="myTable">
<head>
    <title>project  43</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script type="text/javascript">
    var myTable=angular.module('myTable',[]);
  myTable.controller('tableCtrl',function($scope,$http){
  $http.get("http://staging.api.sample.com/events.json", {headers: {Authorization: 'vuNYhXbpKfH7dxkL4h1o2etBJDEiVrRdsds'}})
   .success(function(response) {
      debugger
    $scope.members=response.events;
     $scope.totals = response.paging;
  });

  });
    </script>
</head>



<body ng-controller="tableCtrl">
 <table border="5">
   <tr>
    <th>Event</th>
     <th>Account Shop</th>
     <th>Place</th>
     <th>Activity</th>
   </tr>

    <tr ng-repeat="member in members">
    <td>

    {{member.Event.name}}<br>  <!--names-->
    {{member.Event.id}}<br>
    {{member.Event.date_start}}<br>   <!--Start Date-->
    {{member.Event.date_end}}<br> 


    <td>
    {{member.AccountShop.id}}<br>
    {{member.AccountShop.name}}<br>
    {{member.AccountShop.short_code}}<br>
    </td>

    <td >
    <div ng-repeat="Place in member.Place">
    {{Place.id}}<br>
    {{Place.name}}<br>
    {{Place.lk_country_code}}<br>
    </div>
    </td>

    <td>
    <div ng-repeat="Activity in member.Activity">
    {{Activity.id}}<br>
    {{Activity.short_description}}
    </div>

    </td>
    </table>
</body>
</html>

【问题讨论】：

您可以将您的姓名和开始日期字段的ng-model 传递给使用ng-click 的函数并将其附加到您的api url
@rahul 是的，先生。我尝试了很多次，但没有任何反应。因为我是 angular 的新手。我不知道我的代码是否有效或者缺少分隔符。
这就是为什么我需要像您先生这样的角度专家提供一些咨询。

标签： jquery json angularjs search filter

【解决方案1】：

尝试以下：假设您的搜索字段：

<input type="text" class="form-control" ng-model="name" />
<input type="text" class="form-control" ng-model="date" />
<button ng-click="search(name,date)" class="blue_button" >search</button>

作用域上的函数是：

var myTable=angular.module('myTable',[]);
      myTable.controller('tableCtrl',function($scope,$http){
      $http.get("http://staging.api.sample.com/events.json", {headers: {Authorization: 'vuNYhXbpKfH7dxkL4h1o2etBJDEiVrRdsds'}})
       .success(function(response) {
          debugger
        $scope.members=response.events;
         $scope.totals = response.paging;
      });

    $scope.search=function(name,date){
         $http.get("http://staging.api.sample.com/events.json?name="+name+"&start_date="+date, {headers: {Authorization: 'vuNYhXbpKfH7dxkL4h1o2etBJDEiVrRdsds'}})
       .success(function(response) {

        $scope.members=response.events;
         $scope.totals = response.paging;
      });

      }
  });

【讨论】：

还添加检查您的姓名和日期是否为空或未定义，然后将其添加到查询字符串。
你让我哭了先生..！有用。希望我能加你到fb先生。问一些关于 angular 的问题。并感谢您，先生，@rahul
我确实给您发了消息，并添加了 fb。检查别人的消息。谢谢！