Question

我不熟悉角度。但前端开发工作我的项目坚持他想要这样的json：

{
"data": [{
    "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"
        }]
    }
}, {
    "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"
        }]
    }
}]
}

我认为我们应该摆脱重复的字符串，例如＆＃34; the_desc＆＃34;和＆＃34;值＆＃34;，并使用：

{
"data": [{
    "area1": [
        ["1", "2"],
        ["3", "4"]
    ]
}, {
    "area2": [
        ["21", "22", "a5"],
        ["23", "24", "b6"]
    ]
}]
}

但他坚持认为NG-repeat无法获得内部数组（它们是已知的列数据行。可能是[] []表数据。问题：在角度1中是否存在类似问题的gettig数据？没有嵌套的NG重复。如果我说每个区域的列是固定的，它会有所不同吗？有没有办法迭代行，并通过索引访问列？在我们的例子中，每个区域都知道列数（页面上的表格）。

原因：服务器的有效负载较少。更快的网络数据传输。

在两个答案的帮助下得到了它，在https://plnkr.co/edit/DrsXTP4kD0CnyAQwuoSu?p=preview上进行了试验，并发现了可爱的角度错误报告：https://docs.angularjs.org/error/ngRepeat/dupes?p0=ele%20in%20data.data%5B1%5D.area2%5B0%5D&p1=string:col%203%20A&p2=col%203%20A。

解决方案的要点：

在js控制器中：

$scope.data =       {
"data": [{"area1":
     [[ "A value 1",...

和HTML：

<div class= "" ng-repeat="ele in data.data[1].area2 track by $index">
  <span class='d2'> {{(ele[0])}} </span><span class='d2'>  {{(ele[1])}}...

Answer 1

作为前端开发者，我也会选择第一个结构。无论如何，你必须像这样使用嵌套的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>

对于第3个剪切，只要数组结构保持不变并且只有两个值，我们就可以通过索引访问它们。

<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的情况下实现这一目标？不见得。嵌套数组太多了。

但老实说，我不认为在对象密钥中存储“值”是一个很好的做法（即使可以用Angular显示），所以我建议你按照你的开发建议并使用第一个结构

Answer 2

不，完全没有，ng-repeats可以嵌套。即使在vanilla Javascript中，您也可以将这些数据转换为您想要的任何形式，以便ng-repeat根据需要显示它。你放的最后两个选项实际上会让这更难。

对于第一个配置，假设它已被JSON.parse()编辑：

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

迭代data数组，area中的每个data为ng-repeat数组创建另一个area#.rows以迭代行。

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

Answer 3

我相信您需要稍微改变一下您的数据结构。像这样设置应该会有所帮助：

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

这里是Plunker。我不确定您是如何获取数据的，或者它是否是硬编码的，但这至少应该让您开始。

angular 1：使用来自服务器json的2-d数组，使用ng-repeat填充表

3 个答案: