如何用ng-repeat从JSON提取并展示每个ModuleDetails的首个Maintitle

嘿，我来帮你搞定这个问题！你的代码有两个关键问题导致没达到预期效果，我一步步给你修正：

问题分析 #

• 首先，Projects是数组类型，你不能直接访问Projects.ModuleDetails，得先遍历数组里的每一个项目对象；
• 其次，你的JSON数据里字段是Maintitle（首字母小写t），但代码里写的是MainTitle（大写T），AngularJS对字段大小写是敏感的，这会导致无法正确读取值。

正确实现代码 #

你需要先遍历Projects数组中的每个项目，然后在每个项目里取ModuleDetails数组的第一个元素的Maintitle：

<div ng-repeat="project in Projects">
  <div>{{project.ModuleDetails[0].Maintitle}}</div>
</div>

完整示例（含控制器） #

为了让你更清楚，我附上一个完整的AngularJS示例：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
  <div ng-repeat="project in Projects">
    <div>{{project.ModuleDetails[0].Maintitle}}</div>
  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.Projects = [
        {
          "ProjectName" : "SmarTest",
          "ProjectDescription" : "abc",
          "ModuleDetails": [
            { "Maintitle":"Getting Started with IoT1" },
            { "Maintitle":"Getting Started with IoT2 " }
          ]
        },
        {
          "ProjectName" : "SmarTest",
          "ProjectDescription" : "abc",
          "ModuleDetails": [
            { "Maintitle":"Getting Started with IoT3" },
            { "Maintitle":"Getting Started with IoT4" }
          ]
        }
      ];
    });
  </script>
</body>
</html>

这样运行后，就会正确渲染出Getting Started with IoT1和Getting Started with IoT3啦！

内容的提问来源于stack exchange，提问作者user9664067