Question

有人可以纠正我这些代码如何工作 - 知道这些代码不是工作代码，我在如何传递URL参数名称和开始日期方面遇到了麻烦。我想通过传递名称的URL参数来过滤名称peter和过滤器上的开始日期。该表正在运行，但如果我将应用代码来设置URL，则代码将无效。没有发生。有人能帮助我吗？

<!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: 'vuNYhXbpKfH7dxkL40aCQ1o2JDEiVrRdsds'}})
                        .success(function (response) {
                            debugger
                            $scope.members = response.events;
                            $scope.totals = response.paging;
                        });
            });
            //url
            http://staging.api.sample.com/events.json?name=peter&start_date_from=2015-01-01
                    $location.search();
            Result:
            {
                name : 'peter',
                        start_date_from:'2015-01-01'
            }
        </script>
    </head>
    <body ng-controller="tableCtrl">
        <table id="filtertable"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>   
                    {{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>

Answer 1

我想你想在HTTP GET请求中的查询参数中发送名称和日期？然后像这样发送：而不是：

$http.get("http://staging.api.sample.com/events.json", {headers: {Authorization: 'vuNYhXbpKfH7dxkL40aCQ1o2JDEiVrRdsds'}})

使用更准确的通话版本：

$http({
                    url: "http://staging.api.sample.com/events.json", 
                    params : {                 name : 'peter',
                        start_date_from:'2015-01-01'},
                    method: "GET",
                    headers: {Authorization: 'vuNYhXbpKfH7dxkL40aCQ1o2JDEiVrRdsds'}
                    });

在params中，指定url参数，称为查询字符串参数。

您必须使用ng-model设置一个变量，您应该在其中存储查询参数。我会告诉你一个名字的方法：在使用tableCtrl的视图中：

<input type="text" ng-model="params.name" placeholder="Tell me name"/>

在控制器中设置监视名称：

 myTable.controller('tableCtrl', function ($scope, $http) {
             $scope.$watch('params.name', function(n,o){
                    if ( n != o ) {
                    $http({
                        url: "http://staging.api.sample.com/events.json", 
                        params : {                 name : $scope.params.name,
                            start_date_from:'2015-01-01'},
                        method: "GET",
                        headers: {Authorization: 'vuNYhXbpKfH7dxkL40aCQ1o2JDEiVrRdsds'}
                        })
                        .success(function (response) {
                            debugger
                            $scope.members = response.events;
                            $scope.totals = response.paging;
                        });
});
            });

$ watch，将观察params.name模型的变化，因此如果它发生变化，api会调用并刷新数据。然后由于双向数据绑定，Angular会自动更新变量。现在它会在打字时一字又一封地改变。然后，当输入失去焦点或输入字母时出现一些延迟后，您可以将其更改为事件。由你决定。

使用网址参数过滤表格

1 个答案: