在angularjs中顯示數組

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

來源

2013-11-14 Ali

要確認你的數據的確是一個數組它添加到頁面中：'

{{ contributors | json }}

' – Heikki

已將結果更新@Heikki – Ali

模板沒有問題。無論是從服務器獲取錯誤格式，還是在客戶端上修改結果。你如何加載你的數據？ – Heikki

第一，當你收到來自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 

}

來源

2013-11-14 20:01:56 Michiel

我想我在上面的問題上做了同樣的事情？ – Ali

@Ali嘗試'$ http'而不是'$ resource'可能會縮小問題的範圍。 – Heikki

阿里，是的，編輯後，我認爲api響應本身就是問題，而不是你的代碼。儘管您可能仍然想考慮在哪個元素中放置ng-repeat。 – Michiel

在angularjs中顯示數組

回答

相關問題