2016-12-07 64 views
0

我有以下数组对象,这是服务器响应。我正在尝试使用ng-repeat来遍历此数组并读取每个值。了解对象数组的ng-repeat

虽然试图在html中使用,array[0].value正在使用,而使用ng-repeat,没有任何工作。

经过大量的调试,我无法理解ng-repeat是如何为数组工作的。

这是我的例子:

消息数组:

[ 
{"Id":14,"Text":"hii hello","count":750}, 
{"Id":10009,"Text":"test message","count":6} 
] 

在HTML用于以下:

<div class="my-message" layout="row" layout-align="center center"> 
     {{messages}} <!-- printing the above array --> 
     <div ng-repat="message in messages"> 
     {{ message.Id}}<!-- printing nothing --> 

</div> 
{{ messages[0].Id }} <!-- printing 14 !--> 
</div> 

阵列是在范围和它也出现在这个网站因为{{message}}数组正在正确打印。

有人可以帮助我了解NG重复的工作和我在哪里丢失

+3

'ng-repat'中的拼写错误(应该是'ng-repeat')? – kukkuz

+1

我的语法错误。谢谢 – user168983

+0

暴露数组在范围 – Haris

回答

0

的问题是与拼写错误使用“NG重复”,修正后,我的代码工作正常预期。

1

在你的控制器,你必须有:

$scope.messages = [{"Id":1,...},...] 

。在你的视图代码一个错字(NG-repat - > NG-重复):

<div ng-repat="message in messages"> 
    {{ message.Id}} 
</div> 

必须是:

<div ng-repeat="message in messages"> 
    {{ message.Id}} 
</div> 

它应该是这样的。

玩得开心

1

希望这将清除您

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <div class="my-message" layout="row" layout-align="center center"> 
 
     {{messages}} <!-- printing the above array --> 
 
     <div ng-repeat="message in messages"> 
 
     {{ message.Id}} 
 
     {{ message.Text }} 
 
     {{ message.count }} 
 
</div> 
 
</div> 
 
    </body> 
 
<script> 
 
    var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.messages =[ 
 
{"Id":14,"Text":"hii hello","count":750}, 
 
{"Id":10009,"Text":"test message","count":6} 
 
]; 
 
    
 
}); 
 
</script> 
 
</html>