Question

我是AngularJS的新手，我正在尝试将作为输入的日期和用于从中获取JSON数据的URL连接起来。对于前我有网址：http://url/date=2015-08-22，因此来自网址的这些数据会为不同的日期提供不同的值。现在，我想根据所选日期显示数据并将其显示在单个页面中（无刷新页面）。另外，我想在表格中显示此URL中的数据。

以下是我现在的情况：

<!DOCTYPE html> 
<html ng-app="app">
<head>
<title>Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js'></script>
    <script>
            var app = angular.module('app', []);
            app.config(['$routeProvider',function ($routeProvider) {
            $routeProvider
            .when('/date', {
            templateUrl: 'table.html',
            controller: 'MainCtrl'
        })
}]);
app.controller('MainCtrl', function ($scope, $http) {
    $scope.info = {
        sel: " "
    };
    $http.get("http://192.168.2.1/info/posts?seldate=" + $scope.info.sel)
    .success(function (response) {
    $scope.condition = response.Table1
    });
});
</script>
    </head>
<body>    
<div ng-controller="MainCtrl">
    <div>
        Date: <input type="text" ng-model="info.sel">
    </div>
     <div>
        <a href="#/date"><input type="button" value="Submit" /></a>    
     </div>
<div ng-view>
</div>
</div>
</body>
</html>

这里Table1来自URL，它有JSON数据。下面是table.html，我在上面的代码中使用过：

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Designation</th>
            <th>Qualification</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in condition">
            <td>{{x.ID}}</td>
            <td>{{x.Name}}</td>
            <td>{{x.Designation}}</td>
            <td>{{x.Qualification}}</td>           
        </tr>    
    </tbody>
</table>

现在，问题是当我输入日期并点击提交时，我只能看到表格标题而且没有内容。我还确保URL没有问题，并且工作正常。请为此提供解决方案。我真的需要这个。在此先感谢!!

Answer 1

首先，我建议您使用ui.router，为您的路线和嵌套视图提供更大的灵活性。

我认为最好的方法是在每个视图的专用控制器中分离逻辑，并使用route参数来检索正确的日期。

例如，您的路线如下：

 $routeProvider
        .when('/date/:date', {      //this add a parameter to your route
        templateUrl: 'table.html',
        controller: 'DateViewCtrl'      //this defines the controller for this ng-view scope
    });

然后将逻辑拆分为2个控制器，MainCtrl：

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.info = {
        sel: " "
    };
}]);

和DateViewCtrl这样的东西：

app.controller('DateViewCtrl', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {

    $scope.condition = [];
    $http.get("http://192.168.2.1/info/posts?seldate=" + $routeParams.date)
    .success(function (response) {
        $scope.condition = response.Table1;
    });
}]);

然后更新链接：

   <a ng-href="#/date/{{your-date}}"><input type="button" value="Submit" /></a>

Answer 2

最好使用最新版本的angularJS进行工作。

因此，我们可以将您的脚本链接更改为以下内容。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.js"></script>

在这里你可以看到，我们用angular.min.js和angular-route.js这两个文件替换你的angularJS v1.1。这是因为，目前角度分割角度库成为不同的文件。

您的代码中的下一个更改是将 ngRoute 注入您的模块。因为现在，我们使用新模块进行路由。

var app1 = angular.module('app', ['ngRoute']);

您的控制器应如下所示：

app1.controller('MainCtrl', function ($scope, $http, $location) {
        $scope.info = {
            sel: " "
        };

        $scope.subt_click = function () {
            $http.get("http://192.168.2.1/info/posts?seldate=" + $scope.info.sel)
                .then(function success(response) {
                    // Your success callback
                    $scope.condition = response.Table1
                },
                    function error() {
                        // Error callback
                    }
                );
            // populate your ng-view with table
            $location.path('/date');
        };

    });

当用户点击提交按钮时，我们需要调用函数 $ scope.subt_click 。我们可以使用 ng-click 指令来实现这一目标，

<input type="button" value="Submit" ng-click="subt_click()" />

所以，你的整个页面看起来都是这样，

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.js"></script>
    <script>
        var app1 = angular.module('app', ['ngRoute']);
        app1.config(['$routeProvider', function ($routeProvider) {
            $routeProvider
            .when('/date', {
                templateUrl: 'table.html',
                controller: 'MainCtrl'
            })
            .otherwise(
                {
                    template : '<h1> Home </h1>'
                }
            )
        }]);
        app1.controller('MainCtrl', function ($scope, $http, $location) {
            $scope.info = {
                sel: " "
            };

            $scope.subt_click = function () {
                $http.get("http://192.168.2.1/info/posts?seldate=" + $scope.info.sel)
                    .then(function success(response) {
                        // Your success callback
                        $scope.condition = response.Table1
                    },
                        function error() {
                            // Error callback
                        }
                    );
                // populate your ng-view with table
                $location.path('/date');
            };

        });
    </script>
</head>
<body>
    <div ng-controller="MainCtrl">
        <div>
            Date: <input type="text" ng-model="info.sel">
        </div>
        <div>
            <input type="button" value="Submit" ng-click="subt_click()" />
        </div>
        <div ng-view>
        </div>
    </div>
</body>
</html>

这就是全部!!!

我没有测试这段代码。如果您有任何问题，请随时询问。

感谢。：）

Answer 3

似乎该按钮未绑定到任何事件处理程序。尝试

<input type="button" value="Submit" ng-click='loadData()'/>

删除封闭的a代码。

在控制器中添加ladData功能

app.controller('MainCtrl', function ($scope, $http) {
    $scope.info = {
        sel: " "
    };
    $scope.loadData=function() {
       $http.get("http://192.168.2.1/info/posts?seldate=" + $scope.info.sel)
       .success(function (response) {
          $scope.condition = response.Table1
        });
    }
});

带控制器的Ng-view

3 个答案: