2013-11-14 50 views
3

我在我的nodejs服务器上有一个API,它将返回一个数组。在angularjs中显示数组

[ 
    "123_ayesha098", 
    "3ar7hkung", 
    "aali", 
    "Abdelhak", 
    "adityaputra", 
    "adraga", 
    "agnusdark", 
    "ahkeno", 
    "ahmedjubayer", 
    "ahsan_hq", 
    "akenygren", 
    "alexfuser", 
    "alexlakatos", 
    "alexxed", 
    "alfasst", 
    "amaciel" 
    ... 
    ... 
] 

我试图显示此列表

<div class="list-group" ng-repeat="name in contributors"> 
    <!-- Links to detail level --> 
    <a href="#/contributors/{{ name }}" class="list-group-item"> 
     <strong>Contributor: </strong> {{ name }} <br> 
    </a> 
    </div> 

它正在显示这样

Contributor: {"0":"1","1":"2","2":"3","3":"_","4":"a","5":"y","6":"e","7":"s","8":"h","9":"a","10":"0","11":"9","12":"8"} 
Contributor: {"0":"3","1":"a","2":"r","3":"7","4":"h","5":"k","6":"u","7":"n","8":"g"} 
Contributor: {"0":"a","1":"a","2":"l","3":"i"} 
Contributor: {"0":"A","1":"b","2":"d","3":"e","4":"l","5":"h","6":"a","7":"k"} 
Contributor: {"0":"a","1":"d","2":"i","3":"t","4":"y","5":"a","6":"p","7":"u","8":"t","9":"r","10":"a"} 
Contributor: {"0":"a","1":"d","2":"r","3":"a","4":"g","5":"a"} 

如何显示它们正确吗?

这样

<pre>{{ contributors | json }}</pre> 

后,我在页面获得这个

[ 
    { 
    "0": "1", 
    "1": "2", 
    "2": "3", 
    "3": "_", 
    "4": "a", 
    "5": "y", 
    "6": "e", 
    "7": "s", 
    "8": "h", 
    "9": "a", 
    "10": "0", 
    "11": "9", 
    "12": "8" 
    }, 
    { 
    "0": "3", 
    "1": "a", 
    "2": "r", 
    "3": "7", 
    "4": "h", 
    "5": "k", 
    "6": "u", 
    "7": "n", 
    "8": "g" 
    }, 
    { 
    "0": "a", 
    "1": "a", 
    "2": "l", 
    "3": "i" 
    }, 

这是service.js

listOfContributors: $resource('/transifex/listOfContributors', {}, { 
    query: { 
    method: 'GET', 
    params: {}, 
    isArray: true 
    } 
}), 

controller.js

$scope.contributors = Transifex.listOfContributors.query(); 

和`app.js

$routeProvider.when("/trans/contributors", { templateUrl: "partials/transifex/userlist.html", controller: "TransifexSplattrController"}); 
+0

要确认你的数据的确是一个数组它添加到页面中:'

{{ contributors | json }}
' – Heikki

+0

已将结果更新@Heikki – Ali

+0

模板没有问题。无论是从服务器获取错误格式,还是在客户端上修改结果。你如何加载你的数据? – Heikki

回答

8

第一,当你收到来自API的答案你设置你的 '贡献者' 变量: 是这样的:

$http({method: 'GET', url: apiservice}) 
    .success(function(data, status, headers, config) { 
     $scope.contributors= data; 
    }); 

在你的HTML你做:

<div class="list-group"> 
     <!-- Links to detail level --> 
     <a ng-repeat="name in contributors" 
      href="#/contributors/{{ name }}" 
      class="list-group-item"> 
      <strong>Contributor:</strong> {{ name }}</a><br> 
    </div> 

这是元素,你把ng重复,将会重复,我认为你想要:

<div> 
<a ..../a> 
<a ..../a> 
<a ..../a> 
</div> 

,而不是

<div> 
<a ..../a> 
</div> 
<div> 
<a ..../a> 
</div> 
<div> 
<a ..../a> 
</div> 

使用$ HTTP把它添加到控制器声明:

myModule.controller('MyController',function($scope, $http) { 

    // all your controller code 

} 
+0

我想我在上面的问题上做了同样的事情? – Ali

+0

@Ali尝试'$ http'而不是'$ resource'可能会缩小问题的范围。 – Heikki

+0

阿里,是的,编辑后,我认为api响应本身就是问题,而不是你的代码。尽管您可能仍然想考虑在哪个元素中放置ng-repeat。 – Michiel