Question

我有一个简单的json文件，其中包含艺术家名称列表，例如

["Vincent van Gogh", "Leonardo da Vinci", "Pablo Picasso"]

我无法弄清楚如何将此外部json文件加载到angularjs数组中并在其上使用ng-repeat。我尝试过的非工作代码是：

<tr ng-repeat="artist in artists">
    <td>{({ artist })}</td>
    <td></td>
</tr>

<script>
var artApp = angular.module('artApp', []);

artApp.config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{({').endSymbol('})}');
});

artApp.controller('mycontroller', function($scope,$http){
   $scope.artists = [];
   $http.get('/home/user/artist_names.json').success(function(data) {
      angular.forEach(data.MainRegister,function(entry) {
         $http.get(entry.url).
          success(function(data) {
            $scope.artists.push(angular.extend(entry,data.SubInformation);
         });
      });
   });
});
</script>

这个控制器代码不仅不起作用，而且还会破坏我的$interpolateProvider代码并使html实际显示我的原始角度变量。

Answer 1

ng-repeat

底部的示例链接

artApp.controller('TodoCtrl', function($scope, $http) {
$http.get('/home/user/artist_names.json')
       .then(function(result){
          $scope.artists = result.data;                
        });
});

在html中

  <ul>
    <li ng-repeat="artist in artists">
      {{artist.name}}
    </li>
  </ul>

在你的JSON中

[{ "name":"Vincent van Gogh"},
 { "name":"Leonardo da Vinci"},
 { "name":"Pablo Picasso"}]

http://plnkr.co/edit/Wuc6M7?p=preview

来自jaime

我遇到了Azure中托管的节点服务器和修复程序是为了确保正确设置JSON文件的mime类型。我曾是在azure中托管，这意味着确保web.config存在正确的设置，但我不确定Django需要什么。没有正确的mime类型，服务器会像你提到的那样报告404。

来自Sam Storie

Answer 2

我遇到了Azure中托管的节点服务器这个问题，修复是为了确保正确设置JSON文件的mime类型。我在azure中托管，这意味着确保web.config存在正确的设置，但我不确定Django需要什么。如果没有适当的mime类型，服务器将报告您提到的404。

Answer 3

你可以试试这个：

 $http.get("/home/user/artist_names.json")
    .success(function(response) {$scope.artists = response;});

如何将json文件加载到Angularjs中以进行ng-repeat

3 个答案: