Question

我有以下对象数组，这是一个服务器响应。我试图使用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>

数组在范围内，并且在此html中也可以看到，因为{{message}}数组正在正确打印。

有人可以帮助我了解ng-repeat的工作情况以及我错过的地方

Answer 1

在您的控制器中，您必须：

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

您的视图代码中存在拼写错误（ng-repat - ＆gt; ng-repeat）：

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

必须是：

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

应该没问题。

玩得开心

Answer 2

希望这会让你清楚

<!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="angular.js@1.4.x" 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>

Answer 3

问题在于使用“ng-repeat”时输入错误，在纠正之后我的代码按预期正常工作。

理解对象数组的ng-repeat

3 个答案: