Question

我有一个rails应用程序，我正在转换为angularjs。

从其他API，我得到JSON，如：

[{"id":1,"products":{"type":"Mustang","color":"blue"},"created_at":"2013-12-02T01:05:20.956Z","updated_at":"2013-12-02T01:05:20.956Z"}]

此时我的角度只是遍历JSON并打印出整个数据列：

<tr ng-repeat="row in rows">
    <td><a href='#'>THIS IS -> </a>{{row.data}}</td>
</tr>

基本上，我想从数据列，键和值中获取，并根据它创建一个HTML表。问题是数据可能会有所不同，因此并不总是像“类型：野马”这样的键/值是第一个，有时一个值将为空，但键不会。

前一段时间我问了类似的question，得到了一个很棒的answer。 解决方案2 非常适合Ruby，但我想将它转换为我项目的angularjs。

感谢您的帮助！

Answer 1

要以AngularJS方式转换Ruby解决方案，您可以使用第三方库（如UnderscoreJS）来转换您想要的JSON。

因此，您可以先从其余API响应中检索产品列表：

var rows = [{"id":1,"products":{"type":"Mustang","color":"blue"},"created_at":"2013-12-02T01:05:20.956Z","updated_at":"2013-12-02T01:05:20.956Z"}, ...]
$scope.products = _.pluck(rows, 'products'); // make a list of the products property of each row

然后，您可以计算标题：

$scope.headers = _.chain($scope.products)
                  .map(_.keys) // take the keys of each product
                  .reduce(function(a, b) {
                            return _.union(a, b);
                          }, []) // merge all keys without double
                  .value();

最后，您可以通过迭代标题和产品来显示您的表格：

<table>
  <tbody>
    <tr>
      <th ng-repeat="key in headers">{{ key }}</th>
    </tr>
    <tr ng-repeat="product in products">
      <td ng-repeat="key in headers">{{ product[key] }}</td>
    </tr>
  </tbody>
</table>

如果产品没有给定的密钥，则它不会显示任何内容。

看看这个plunker。

像Underscore这样的实用程序库非常便于以功能方式操作数据。我建议你查看API和文档。

Answer 2

您可以将其设置为指令代替ng-repeat（这只是一个指令）并遵循Ruby代码中的逻辑。

或

您可以使用ng-repeat代替{{row.data}}使用带有row.data的函数作为参数。然后，该函数可以处理键/值的必要检查。

的Darryl

从JSON创建HTML表

2 个答案: