Fatal编程技术网
  • angularjs/
  • Angularjs 如何从页面上的$http获取数据？

Angularjs 如何从页面上的$http获取数据？

angularjs

Angularjs 如何从页面上的$http获取数据？,angularjs,Angularjs,我正在学习AngularJS，我遇到了一个无法回避的问题 我正在编写一个小测试页面，它从我以前编写的RESTfulAPI中检索一些数据 我可以成功地从Angular中检索此数据，但似乎找不到在页面上显示此数据的方法。我正在尝试循环查看结果列表，并将其打印到表中 这是我的index.html： <!DOCTYPE html> <html> <head> <title>AngularJS</title>

我正在学习AngularJS，我遇到了一个无法回避的问题

我正在编写一个小测试页面，它从我以前编写的RESTfulAPI中检索一些数据

我可以成功地从Angular中检索此数据，但似乎找不到在页面上显示此数据的方法。我正在尝试循环查看结果列表，并将其打印到
表中

这是我的
index.html
：


<!DOCTYPE html>
<html>
    <head>
        <title>AngularJS</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf8" >

        <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">

        <script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>

        <script type="application/javascript" src="./js/URLSet.js"></script>
        <script type="application/javascript" src="./js/app.js"></script>
    </head>
    <body ng-app="MyApp">
        <div ng-controller="URLSetDAO as dao">
            <button class="btn" ng-click="dao.list()">List</button>
            <table class="table" ng-init="urlsets = dao.list()">
                <td ng-repeat="urlset in urlsets">
                    <tr>
                        {{ urlset.pk }}
                    </tr>
                    <tr>
                        {{ urlset.user }}
                    </tr>
                    <tr>
                        {{ urlset.title }}
                    </tr>
                    <tr>
                        {{ urlset.views}}
                    </tr>
                    <tr>
                        {{ urlset.type }}
                    </tr>
                </td>
            </table>
        </div>      
    </body>
</html>


这是
URLSet.js
：


(function() {
    var app = angular.module('MyApp', ['URLSet']);
})();



(function() {
    var app = angular.module('URLSet', []);

    app.controller('URLSetDAO', ['$http', function($http){
        var ip = "http://localhost:8000";
        var store = this;

        this.list = function() {
            return $http({method: 'GET', url: ip + '/urlsets/'})
                .success(function(data, status, headers, config) {
                    console.log(data);
                })
                .error(function(data, status, headers, config) {

                });
        };

        this.read = function(id) {
            $http({method: 'GET', url: ip + '/urlsets/' + id})
                ...
        };

        this.create = function(obj) {
            $http({method: 'POST', url: ip + '/urlsets/'})
                ...
        };

        this.update = function(id, obj) {
            $http({method: 'PUT', url: ip + '/urlsets/' + id})
                ...
        };

        this.remove = function(id) {
            $http({method: 'DELETE', url: ip + '/urlsets/' + id})
                ...
        };
  }]);
})();


我知道承诺的工作方式类似于回调，所以它是异步的。那么，如果
ng init
不等待函数完成，如何显示这些数据呢

编辑：

除了我反转了
tr
和
td
标记（感谢你建议Plunker，它指出了我这个错误），使表格变得不可见（这样我就永远看不到页面上的结果），我还将
$scope
注入了我的控制器

现在是这样的:


...
app.controller('URLSetDAO', ['$http', '$scope', function($http, $scope){
        var ip = "http://localhost:8000";
        var store = this;

        this.list = function() {
            $http({method: 'GET', url: ip + '/urlsets/'})
                .success(function(data, status, headers, config) {
                    $scope.urlsets = data;
                })
                .error(function(data, status, headers, config) {

                });
        };
...


和index.html：


<body ng-app="MyApp">
        <div ng-controller="URLSetDAO as dao">
            <button class="btn" ng-click="dao.list()">List</button>
            <table class="table" ng-init="dao.list()">
                <tr ng-repeat="urlset in urlsets">
                    <td>
                        {{ urlset.pk }}
                    </td>
                    <td>
                        {{ urlset.user }}
                    </td>
                    <td>
                        {{ urlset.title }}
                    </td>
                    <td>
                        {{ urlset.views}}
                    </td>
                    <td>
                        {{ urlset.type }}
                    </td>
                </tr>
            </table>
        </div>      
    </body>




列表
{{urlset.pk}
{{urlset.user}
{{urlset.title}}
{{urlset.views}
{{urlset.type}

解决此问题的一种方法是删除
ng init
，改为在控制器中执行此操作：

例如：


app.controller('URLSetDAO', ['$http', '$scope', function($http, $scope){
    var ip = "http://localhost:8000";
    var store = this;

    this.list = function() {
        return $http({method: 'GET', url: ip + '/urlsets/'})
            .success(function(data, status, headers, config) {
                console.log(data);
            })
            .error(function(data, status, headers, config) {

            });
    };

    this.list().success(data) {
      $scope.urlsets = data;
    });

    ...

});



希望这有帮助。
你能给我看一个同样的打孔器吗。我们可以纠正错误implementation@satish哦，哇，没有你的评论，我永远不会看到它。我反转了
td
和
tr
标签。普朗克把那个错误指给我看。这段代码正在工作，只是没有正确呈现。我觉得这很奇怪，虽然我正确地跟踪了所有的事情，但它不起作用。谢谢你，对于这个愚蠢的错误我很抱歉。你能更新这个问题并关闭它作为答案吗。它将帮助其他人正确地得到答案。谢谢，我能关上它吗？我应该标记它吗？