使用angularjs无法从json文件获取数据

时间:2015-08-04 18:02:26

标签: javascript html json angularjs rest

这是我的HTML文件和JS文件 我没有从JSON文件获取任何数据到html文件 下面我有HTML文件和JS文件:

<!Doctype html>
   <html ng-app>
   <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script type="text/javascript">
      alert("c");
function imagecontroller($http,$scope){
    alert("cd");
    $http.get('ytdata.json').success(function(ytdata) {
        alert("cdscdsc");
                $scope.data = ytdata;
    });
}  
   </script>
 <style type="text/css">
        li{list-style:none;float:left;padding:20px;}
     a{text-decoration:none;}
 </style>
</head>
          <body>
   <div ng-controller="imagecontroller">
     <ul> 
     <li ng-repeat="datum in data">
              <a>
             <img ng-src="{{datum.thumbUrl}}"/>
                    <br />Id : {{datum.id}} 
                        <br />Purchase : {{datum.Purchase}} 
        </a>
    </li>
</ul>
</div>
   </body>
   </html>

这是我的json文件:

[
        {
            "id":"mobile.jpg",
            "thumbUrl":"image url",
            "Purchase":20000
        },
        {
            "id":"pendrive.jpg",
            "thumbUrl":"image url",
            "Purchase":400
        },
        {
            "id":"laptop.jpg",
            "thumbUrl":"image url",
            "Purchase":3833
        }

]

请告诉我这个程序的输出

提前致谢

1 个答案:

答案 0 :(得分:1)

Here is a working plunker of what you are trying to do

<强>控制器

app.controller('MainCtrl', function($scope, $http) {
  $scope.data = null;
  $http.get("data.json").success(function (data) {
    $scope.data = data;
  });
});

查看

<body ng-controller="MainCtrl">
  <ul>
    <li ng-repeat="datum in data">
      <a>
        <img ng-src="{{datum.thumbUrl}}" />
        <br />Id : {{datum.id}}
        <br />Purchase : {{datum.Purchase}}
      </a>
    </li>
  </ul>
</body>