Question

我有json数组，我想从这里创建表，并希望给出一个数组元素的标题。以下是显示该方案的fiddle。

 string myString = "/1//2//56//21/";
 int[] arrayInt = Regex.Split(myString, "/+").Where(s => !String.IsNullOrWhiteSpace(s)).Select(Int32.Parse).ToArray();

这将使用IDTYPE中的标题创建简单表。但我想用唯一的IDTYPE对行进行分组。因此，所需的表格将如此link所示。

所以我尝试添加ng-show条件<div ng-repeat="products in items"> <div>{{products.IDTYPE}}</div> <div> <table border=1> <thead> <th>primkey</th> <th>userid</th> </thead> <tbody> <tr> <td>{{products.PRIMKEY}}</td> <td>{{products.USERID}}</td> </tr> </tbody> </table> </div>，但它不能正常工作，因为每行都会构造tbody和table。This就是我尝试过的。

那么如何在上面的描述中按需要生成表格？

Answer 1

如果您不希望更改源数据结构以更好地满足您的需要，您可能需要编写一些额外的代码来从javascript端更改它。类似的东西：

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.items = [...]; //your original data

    // Here the transformation begins...
    $scope.newItems = {};

    for (var i = 0; i < $scope.items.length; i++) {
        // We'll make it look like a map
        // Each IDTYPE will have an array associated to it
        if (!$scope.newItems[$scope.items[i].IDTYPE]) {
            $scope.newItems[$scope.items[i].IDTYPE] = [];
        }
        $scope.newItems[$scope.items[i].IDTYPE].push($scope.items[i]);
    }
}

从HTML方面，您只需相应地阅读新数据：

<div ng-repeat="products in newItems">
    <div>{{products[0].IDTYPE}}</div>
    <div>
        <table border=1>
            <thead>
                <th>primkey</th>
                <th>userid</th>
            </thead>
            <tbody>
                <tr ng-repeat="productItem in products">
                    <td>{{productItem.PRIMKEY}}</td>
                    <td>{{productItem.USERID}}</td>
                </tr>
            </tbody>
        </table>    
    </div>
</div>

小提琴：http://jsfiddle.net/5mpgzdem/

在ngrepeat中对行进行分组

1 个答案: