angularjs 不显示 json 数据 http.get
angularjs doesn't show json data with http.get
我需要在 table 中显示 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)
有人可以帮我解决这个错误吗?
谢谢
哟,你把 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 和它的工作。
我需要在 table 中显示 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)
有人可以帮我解决这个错误吗? 谢谢
哟,你把 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 和它的工作。