了解对象数组的 ng-repeat

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 -> 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

Understanding ng-repeat for array of Objects

javascript

angularjs

arrays

angularjs-ng-repeat

ng-repeat