Question

我有一张桌子

<table>

    <thead>
        <tr class="">
            <th class="" ng-repeat="span in realm.spans">{{span.description}}</th>
        </tr>
    </thead>

    <tbody>
        <tr class="content-row" ng-repeat="row in realm.rows" ng-class="rowClass(row)" ng-click="markRow($event,row)">
            <td class="content-field" ng-repeat="(i,field) in row.fields track by $index>
                <input class="content-input" type="text" ng-model="row.fields[i]">
            </td>
        </tr>
    </tbody>

</table>

如何强制执行thead上使用的订单，还可以与表格中的td元素一起使用？

我试过这个：

 <td ng-repeat="(i,field) in row.fields track by $index | orderBy: realm.spans>
    <input type="text" ng-model="row.fields[i]">
 </td>

但这没有改变

Answer 1

看看这个示例演示

<强> Working Demo

<强> HTML

<div ng-app='myApp' ng-controller="ArrayController">
    <table border="1">
     <th ng-repeat="header in headers"> <b>{{ headers[$index]}}</b></th>
     <tr ng-repeat="arr in records">
        <td ng-repeat="val in arr" ng-bind-html-unsafe="arr[headers[$index]]">
        </td>
     </tr>
    </table>
</div>

<强>脚本

var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
    $scope.headers = ['col1', 'col2'];
    $scope.records = [{
        col1: 'a1',
        col2: 'd1'
    }, {
        col1: 'c2',
        col2: 'A2'
    }, {
        col1: 'b3',
        col2: 'c3'
    }, {
        col1: 'd4',
        col2: 'a1'
    }, {
        col1: '11',
        col2: '22'
    }, {
        col1: 'E1',
        col2: 'E2'
    }];
});

AngularJS - 订购一张与头部相匹配的桌子

1 个答案: