如何JSON文件加载到Angularjs为NG-重复 [英] How to load json file into Angularjs for ng-repeat

问题描述

我有艺术家的名字，列表的简单的JSON文件像

I have a simple json file with a list of artist names, like

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

我无法弄清楚如何将此外部JSON文件加载到其上一个angularjs阵列和使用NG重复。非工作code我想的是：

I can't figure out how to load this external json file into an angularjs array and use ng-repeat on it. The non-working code I tried is:

<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>

这不仅控制器code没有工作，但它打破我的 $ interpolateProvider code，使HTML居然显示我的原角变量。

Not only does this controller code not work, but it breaks my $interpolateProvider code and makes the html actually display my raw angular variables.

推荐答案

在底部NG重复实例链接

Example link at the bottom for 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=$p$ PVIEW

从海梅

我遇到了这个问题与一个节点服务器Azure和修复托管
  是确保JSON文件的MIME类型被正确设置。我曾是
  在蔚蓝的托管，这样意味着确保web.config文件与现有的
  正确的设置，但我不知道什么是必需的和Django。没有
  正确的MIME类型就像你提到的服务器将报告404。

I ran into this issue with a node server hosted in Azure and the fix was to ensure the mime type for JSON files was set properly. I was hosting in azure so that meant ensuring a web.config existed with the right settings, but I'm not sure what's required with Django. Without the proper mime type the server would report a 404 like you mentioned.

从SAM Storie

这篇关于如何JSON文件加载到Angularjs为NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！