angularjs - 在angularjs中显示一个数组

Question

我的 nodejs 服务器上有一个 API，它将返回一个数组。

[
  "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"});

Answer 1

首先，当您从 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-repeat 的元素将被重复，我想您想要:

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

而不是

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

只有将 $http 注入(inject)到 Controller 声明中才能使用它:

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

  // all your controller code

}