AngularJS从JSON读取数据

问题描述：

你好我是新的角度，我再次有一些帮助。我试图从一个JSON文件DATAS：teams.json，但它不工作我的控制器是这样的：AngularJS从JSON读取数据

app.controller('TeamController', ['$http', function($http){ 
    var liste = this; 
    liste.teams = [];  
    $http.get('teams.json').success(function(data){ 
     liste.teams = data; 
    }); 
}]);

，并在我的html：

<!DOCTYPE html> 
<html ng-app="teamStats"> 

    <head> 
     <link rel="stylesheet" href="style.css"> 
     <script src="script.js"></script> 
     <script src="angular.js"></script> 
     <script src="app.js"></script> 
    </head> 
    <body ng-controller="TeamController"> 
     <!-- 
     %%%%%%%%%%%%%%%%%%%%%%%%%%% BODY CONTENT   
     --> 
     <div id="wrap" > 
       <div class="container"> 
        <div > 
         <ul> 
          <li ng-repeat="team in liste.teams">{{team.name + team.win}}</li> 
         </ul> 
        </div> 
       </div> 
     </div>   
     <!-- 
     %%%%%%%%%%%%%%%%%%%%%%%%%%% END OF BODY CONTENT  
     --> 
    </body> 
</html>

提前感谢！希望有人看到我错了我做了plunker为了便于理解的 myPlunker

最好的问候，文森特

答

好吧，我想我现在知道为什么它不工作！ ng-repeat，ng-view，ng-include等都使用AJAX加载模板。问题是浏览器默认情况下不允许AJAX请求位于本地文件系统上的文件（出于安全原因）。因此，你有两个选择：

运行本地Web服务器，这将有助于您的文件告诉你的浏览器，允许本地文件访问

感谢您的帮助！全部感谢Vadim的解释！并且非常感谢zsong！ :)

答

控制器更改为这个

app.controller('TeamController', ['$http', '$scope', 
    function($http, $scope) { 
     var liste = this; 
     $scope.liste = {}; 
     $scope.liste.teams = []; 
     $http.get('teams.json').success(function(data) { 
     $scope.liste.teams = data; 
     }); 
    } 
    ]);

并修复您的JSON文件。您需要删除其他,小号

演示：http://plnkr.co/edit/jeHnvykYLwVZLsRLznRI?p=preview

为什么你不能''scope.liste = {teams：[]};'开玩笑！ :) – PSL 2014-10-04 04:53:52

嗨，感谢您的帮助！ :)我尝试了我的HTML在笨蛋，现在工作！但是我仍然在localhost遇到问题......我的网页是空白的。我认为wamp正在做一些不好的事情...... – Vincent 2014-10-04 09:11:22

AngularJS从JSON读取数据

相关推荐