了解对象数组的 ng-repeat答案

【问题标题】：Understanding ng-repeat for array of Objects了解对象数组的 ng-repeat
【发布时间】：2017-04-22 03:39:05
【问题描述】：

我有以下对象数组，这是一个服务器响应。我正在尝试使用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 的工作原理以及我错过了什么

【问题讨论】：

ng-repat 中的错字（应该是ng-repeat）？
我的语法不好。谢谢
在作用域上暴露数组

标签： javascript angularjs arrays angularjs-ng-repeat ng-repeat

【解决方案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>

这样应该没问题。

玩得开心

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：