如何在angularjs中使用ng-repeat访问带有方括号的项目答案

【问题标题】：How to access the items with square braces using ng-repeat in angularjs如何在angularjs中使用ng-repeat访问带有方括号的项目
【发布时间】：2017-03-07 18:39:29
【问题描述】：

我无法访问嵌套集合中的某些项目。

数组：

$scope.myArray = {
    "pm_id": 2,
    "type": "Scrum",
    "estimated_end_date": "Wednesday, March 15, 2017",
    "no_of_sprints": 2,
    "status": "Not Started",
    "created_by": "admin@admin.com",
    "sprint": [
        {
            "s_id": 4,
            "p_id": 35,
            "sprint_stage": "Sprint 1",
            "sprint_requirement_[1]": "<p>description goes here </p>",
            "sprint_start_date_[1]": "Monday, March 13, 2017",
            "sprint_end_date_[1]": "Friday, March 17, 2017"
        }, 
        {
            "s_id": 5,
            "p_id": 35,
            "sprint_stage": "Sprint 2",
            "sprint_requirement_[2]": "<p>description goes here </p>",
            "sprint_start_date_[2]": "Monday, March 20, 2017",
            "sprint_end_date_[2]": "Friday, March 24, 2017"
        }
    ]
}

带有 ng-repeat 的 HTML：-

<p ng-repeat="y in myArray">
<p ng-repeat="x in myArray.sprint">{{x.p_id}} , {{x.sprint_requirement_[1]}}</p></p>

{{x.p_id}} 工作正常，但 {{x.sprint_requirement_[1]}} 变得空白。

谁能告诉我我错过了什么？

【问题讨论】：

标签： angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

试试：

<p ng-repeat="x in myArray.sprint">{{ x.p_id }}, {{ x['sprint_requirement_[' + ($index + 1) + ']'] }}</p>

另外，外部的ng-repeat 对我来说似乎是多余的。

说明：在 Javascript 中，您可以使用点运算符和方括号语法访问对象属性。

【讨论】：

sprint[1] 不包含具有sprint_requirement_[1] 属性的对象。
sprint[0] 确实包含sprint_requirement_[1]...我已经更新了我的答案以说明编号...（顺便说一下，这是一个非常奇怪的数据结构...）。跨度>

【解决方案2】：

首先，您的 myArray 不是数组，因此 ng-repeat 不起作用。其次，您的 sprint_requirement 不应该有索引。

$scope.myArray = [{
  "pm_id": 2,
  "type": "Scrum",
  "estimated_end_date": "Wednesday, March 15, 2017",
  "no_of_sprints": 2,
  "status": "Not Started",
  "created_by": "admin@admin.com",
  "sprint": [{
    "s_id": 4,
    "p_id": 35,
    "sprint_stage": "Sprint 1",
    "sprint_requirement": "description goes here",
    "sprint_start_date": "Monday, March 13, 2017",
    "sprint_end_date": "Friday, March 17, 2017"
  }, {
    "s_id": 5,
    "p_id": 35,
    "sprint_stage": "Sprint 2",
    "sprint_requirement": "description goes here",
    "sprint_start_date": "Monday, March 20, 2017",
    "sprint_end_date": "Friday, March 24, 2017"
  }]
}];

第三，在您的 html 中，第一个 ng-repeat 将 y 声明为一个变量，因此第二个 ng-repeat 应该在该变量内的 sprint 数组上工作。：

<div ng-repeat="y in myArray">
  <p class="lead">{{y.type}}</p>
  <p ng-repeat="x in y.sprint">{{x.p_id}} , {{x.sprint_requirement}}</p>
</div>

【讨论】：

【解决方案3】：

angular.module("app",[]) 
.controller("ctrl",function($scope){ 
$scope.myArray = [{ "pm_id": 2, "type": "Scrum", "estimated_end_date": "Wednesday, March 15, 2017", "no_of_sprints": 2, "status": "Not Started", "created_by": "admin@admin.com", "sprint": [{ "s_id": 4, "p_id": 35, "sprint_stage": "Sprint 1", "sprint_requirement_[1]": "<p>description goes here </p>", "sprint_start_date_[1]": "Monday, March 13, 2017", "sprint_end_date_[1]": "Friday, March 17, 2017" }, { "s_id": 5, "p_id": 35, "sprint_stage": "Sprint 2", "sprint_requirement_[2]": "<p>description goes here </p>", "sprint_start_date_[2]": "Monday, March 20, 2017", "sprint_end_date_[2]": "Friday, March 24, 2017" }]}] })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="y in myArray">
   <p ng-repeat="x in y.sprint">{{x.p_id}} , {{x['sprint_requirement_['+($index +1) +']']}}</p>
   </div>
</div>

【讨论】：