在angularjs中显示数组

时间:2013-11-14 19:45:19

标签: angularjs angularjs-ng-repeat

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

1 个答案:

答案 0 :(得分: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-repeat放在那个元素上会重复,我猜你想要:

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

而不是

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

如果将其注入Controller声明,则只能使用$ http:

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

  // all your controller code

}