【问题标题】:angularjs doesn't show json data with http.getangularjs 不显示带有 http.get 的 json 数据
【发布时间】:2016-11-16 09:47:23
【问题描述】:

我需要在表格中显示 json 数据,我使用 http.get 函数来检索 json 数据但我无法显示它们。

我试过了,但没用:

HTML

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js" />
        <script>
            myApp = angular.module('myApp', [])
            myApp.controller('myController', function($scope, $http){
                $http.get('data.json').success(function(response){
                    $scope.myData = response;
                });
                $scope.removeName = function(row) {
                    $scope.myData.splice($scope.myData.indexOf(row),1)
                }
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
        Search: <input type="text" value="" ng-model="search" /><br><br>
        <table border=1>
            <tr ng-repeat = "Data in myData | filter : search">
                <td>{{myData.name}}</td>
                <td>{{myData.company}}</td>
                <td><a href="" ng-click="removeName(data)">Remove</a></td>
            </tr>
        </table>
    </body>
</html>

JSON

[
 {"name":"Steve Jobs", "company":"Apple"},
 {"name":"Larry Page", "company":"Google"},
 {"name":"Bill Gates", "company":"Microsoft"},
 {"name":"Larry Ellison", "company":"Oracle"},
 {"name":"Sergey Brin", "company":"Google"},
 {"name":"Steve Wozniak", "company":"Apple"}

]

控制台错误

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js%3A21%3A179)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:6:412
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:40:222
    at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:319)
    at cb (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:43:336)
    at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:20:390)
    at Bc (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:21:179)
    at fe (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:20:1)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:317:386
    at HTMLDocument.b (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:189:487)

有人可以帮我解决这个错误吗? 谢谢

【问题讨论】:

    标签: angularjs json angular http-get


    【解决方案1】:

    哟,您将 myData 重复到 Data 属性中,但您正在输出 myData :)

    <tr ng-repeat = "Data in myData | filter : search">
                <td>{{Data.name}}</td>
                <td>{{Data.company}}</td>
                <td><a href="" ng-click="removeName(Data)">Remove</a></td>
            </tr>
    

    试试这个,注意我在 {{ }} 中所做的更改

    好的,这是工作代码 - https://plnkr.co/edit/dLei9iIM9ddfBAjoAytZ 我刚刚用 1.5.6 替换了你的 angular 并且它工作正常。

    【讨论】:

    • 谢谢,但也有了这个修改结果没有改变,在输出中我只有一行打印“Data.name”、“Data.company”和“Remove”
    • 您能否粘贴您的 ajax 调用返回的数据集?你的控制台也有错误吗?
    • 是的,我在 angular.js 文件中的控制台中有一个错误,它是:未捕获的错误:[$injector:modulerr] errors.angularjs.org/1.2.26/$injector/…...gleapis.com%2Fajax%2Flibs%2Fangularjs% 2F1.2.26%2Fangular.min.js%3A17%3A415)(…)
    • 嗯,这个错误是个问题:) 首先,有没有特别需要使用 angular 1.2 而不是 1.5?并将整个错误粘贴到问题中
    • 不,现在我使用 angular 1.5.8 并且错误是相同的,我将其发布在问题中
    猜你喜欢
    • 2018-02-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-03-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多