angular.js - 如何用angularjs读取本地json？

Question

我读取了text.json，并且赋值到$scope.data里了,在html中用ng-repeat没有反应。请问怎么样才能让读取出来的数据分别写到html页面里对应的位置去？
ps:这段代码运行时报错说，找不到json文件的路径404.
js:

 function dataController($http,$scope) {
 $http.get("json/text.json").success(function(freetrial) { alert(freetrial);$scope.data = freetrial;});

json里的数据:

{"freetrial":[{
"id": "01",
"imgurl": "images/1.jpg",
"status": "0"
},
{
"id": "02",
"imgurl": "images/2.jpg",
"status": "1"
}
]}

html:

<p ng-controller="dataController" ng-repeat="x in data|filter:{status:'0'}">
<p id="{{x.id}}">
<img ng-src="{{x.imgurl}}" />
</p>
</p>

Answer 1

Puisqu'il a généré 404, ce qui signifie que json n'a pas été trouvé, cela devrait être un mauvais chemin

Et le success() dans votre méthode freetrial représente en fait toutes les données json, vous ne pourrez donc pas les obtenir lorsque vous souhaiterez obtenir le tableau plus tard.

doit être pris comme ceci :

 function dataController($http,$scope) {
     $http.get("json/text.json").success(function(data) {
         $scope.data = data.freetrial;
     });
 }

Answer 2

Vous pouvez d'abord configurer le chemin absolu, puis passer au chemin relatif si cela réussit et qu'il n'y a pas d'autres problèmes.

Answer 3

Vous pouvez d'abord configurer le chemin absolu, puis passer au chemin relatif si cela réussit et qu'il n'y a pas d'autres problèmes.

Answer 4

L'avez-vous retiré ?
Je n'ai pas réussi à le retirer

Answer 5

S'il s'agit d'une erreur 404, cela signifie que les données json de get n'ont pas été obtenues, c'est-à-dire qu'il y a un problème avec le chemin json. J'ai copié votre code et je l'ai essayé. Si le chemin est correct, le. les données ne seront pas affichées sur la page ci-dessus.
Mais :

function dataController($http,$scope) {
$http.get("json/text.json").success(function(freetrial) {   
        alert(freetrial);
        $scope.data = freetrial;
        console.log($scope.data);//可以打印出数据
    });
};

La méthode d'obtention correcte devrait être :

function dataController($http, $scope) {
    $http.get("rightUrl").success(function(data) {
        $scope.data = data.freetrial;
    });
};

Le rôle des données : se référer au code source d'angular.js

 $http.get('test_data.json', 
     {cache: $templateCache}).success(function(userComments){
       self.userComments = userComments;
 });