Ng-repeat使用键值对呈现数据

Question

我有一个JSON结构，如：

"Address": {
        "Address1": [
          "Lane1",
          "Lane2"
        ]
}

我想使用ng-repeat在表格中渲染值。

<td ng-repeat="(key,value) in results">{{value}}</td>

这会在表格中将数据显示为["Lane1", "Lane2"]。

如何在没有使用ng-repeat的数组括号的情况下正确显示表中的数据，例如：Lane1,Lane2？

我需要显示两个值，而不仅仅是一个值，我可以使用{{value[0]}}

来实现

Answer 1

您可以尝试：

{{value.join(", ")}}

JSFiddle - http://jsfiddle.net/paoc5bvg/

Answer 2

ng-repeat with（key，value）作为输出将在您的示例中为您提供键“Address1”和值为数组["Lane1", "Lane2"]。现在，您可以轻松访问value[0]或value[1]上的元素。因此，只需使用{{ value.join (',') }}

即可满足您的需求

Answer 3

我的想法是使用JavaScript的连接。但是如果你在视图中这样做会使应用程序结构发生变化，那么就可以这样做。

<td ng-repeat="(key,value) in results">limit(value)</td>

在控制器中你可以定义类似的函数。

$scope.limit=function(value){return value.join(",")}

我希望它会有所帮助

Answer 4

请参阅此jsfiddle http://jsfiddle.net/Vwsej/ 和此主题angularjs - ng-repeat: access key and value from JSON array object

<div ng-controller="MyCtrl">
    <ul ng-repeat="item in items">
        <li ng-repeat="(key, val) in item">{{key}}: {{val}}</li>
    </ul>
</div>

Answer 5

您应该为行使用一个ng-repeat，然后为列使用另一个。

<tr ng-repeat="(key,value) in results">
    <td ng-repeat="data in value">{{data}}</td>
</tr>

如果这不是你想要的，我想你可以加入最后一个阵列。

{{value.join(', ')}}

希望它有所帮助。