Angular 1:使用server's json中的二维数组，用ng-repeat填充表

作为前端开发人员，我也会选择第一种结构。在任何情况下，您都必须像这样使用嵌套的ng-repeat:

<div class="area" ng-repeat="area in data">
    <div class="row" ng-repeat="row in area.rows">
        <p class="description">{{::row.the_desc}}</p>
        <p class="value">{{::row.value}}</p>
    </div>
</div>

第二个代码片段:

<div class="area" ng-repeat="area in data">
    <div class="row" ng-repeat="(key, value) in area.rows">
        <p class="description">{{::key}}</p>
        <p class="value">{{::value}}</p>
    </div>
</div>

对于第三段代码，假设数组结构保持不变并且只有两个值，我们将能够通过索引访问它们。

<div class="area" ng-repeat="(key,area) in data">
    <!-- Prints area1, area2 if necessary -->
    <p>{{key}}</p>
    <!-- Prints 1st and 2nd value of the area array -->  
    <div class="row" ng-repeat="row in area">               
        <p class="description">{{row[0}}</p>
        <p class="value">{{row[1]}}</p>
    </div>
</div>

是否有可能在没有嵌套的ng-repeat的情况下实现这一点?不太可能。嵌套数组太多

但老实说，我不认为在object key中存储"value"是一个好的做法(即使它可以用Angular显示)，所以我建议你遵循开发者的建议，使用第一个结构。

不，根本不需要，ng-repeats可以嵌套。即使在普通的Javascript中，您也可以将这些数据转换成您想要的任何形式，以便使ng-repeat按所需显示它。最后两个选项实际上会让这变得更困难。

对于第一个配置，假设它是JSON.parse() ed:

<section ng-repeat="area in data">
  <div ng-repeat="row in area.rows">
    <p>{{row.the_desc}} is {{row.value}}</p>
  </div>
</section>

这遍历data数组，并且对于data中的每个area，为area#.rows数组创建另一个ng-repeat以遍历行。

甚至可以使用ng-repeat来迭代对象中的键，这需要使用其他两种解决方案来完成。

我认为您需要稍微改变一下您的数据结构。像这样设置应该会有帮助:

$scope.data = [{
    name: "area1",
    rows : [{
              "the_desc": "A value 1",
              "value": "sample value 1"
          }, {
              "the_desc": "A value 2",
              "value": "sample value 2"
          }, {
              "the_desc": "A value 3",
              "value": "other 3"
          }, {
              "the_desc": "A value 4",
              "value": "other 4"
          }, {
              "the_desc": "A value 5",
              "value": "other goats fly"
          }, {
              "the_desc": "A value 6",
              "value": "bla blah"
          }, {
              "the_desc": "A value 7",
              "value": "other 7"
          }, {
              "the_desc": "A value 8",
              "value": "other 8"
          }]
}, 
{
   name: "area2",
    "rows": [{
        "the_desc": "A value 9",
        "value": "sample value 9"
    }, {
        "the_desc": "A value 10",
        "value": "sample value 10"
    }, {
        "the_desc": "A value 11",
        "value": "other 11"
    }, {
        "the_desc": "A value 12",
        "value": "other 12"
    }, {
        "the_desc": "A value 13",
        "value": "other goats fly 13"
    }, {
        "the_desc": "A value 14",
        "value": "bla blah"
    }, {
        "the_desc": "A value 15",
        "value": "other 15"
    }, {
        "the_desc": "A value 16",
        "value": "other 16"
    }]
}

那么使用ng-repeat就很容易访问了，像这样:

      <div ng-repeat="d in data">
    <h1>{{d.name}}</h1>
    <div ng-repeat="r in d.rows">
      {{r.the_desc}}
    </div>
  </div>

这是一个普朗克。我不确定您是如何获得数据的，或者它是否是硬编码的，但这至少应该让您开始。