具有未知列数的angularjs ng-repeat排序表

时间:2013-08-12 15:53:32

标签: javascript sorting angularjs angularjs-ng-repeat

我正在尝试按每列排序一个表。该表每次都有不同的行数和列数。问题在于谓词。所有重复的列都是名称“i”,我需要能够单独对它们进行排序。

HTML:

<table>
    <thead>
        <th><a href="" ng-click="predicate='value';reverse=!reverse">name</a></th>
        <th ng-repeat="header in headers"><a href="" ng-click="predicate='i';reverse=!reverse">{{header}}</a></th>
    </thead>
    <tbody>
        <tr ng-repeat="v in columns | orderBy:predicate:reverse">
            <td>{{v.value}}</td>
            <td ng-repeat="i in v.item">{{i}}</td>
        </tr>
    </tbody>
</table>

控制器:

function controller($scope) {
    $scope.headers = ["col1", "col2", "col3", "col4"];
    $scope.columns = [{value:'row1', item:['1','2','3','4']},
                      {value:'row2', item:['4','5','6','7']},
                      {value:'row3', item:['8','9','10','11']},
                      {value:'row4', item:['12','13','14','15']}];
    $scope.predicate = 'value';
}

这是jsfiddle

感谢您的回复。

1 个答案:

答案 0 :(得分:1)

像这样更改语句

<th ng-repeat="header in headers">
     <a href="" ng-click="$parent.predicate='item['+$index+']';$parent.reverse=!reverse">{{header}</a>
</th>

注意:由于单元格都是字符串,因此会按字母顺序将所有列排序为字符串。

希望它可以有所启发。

Demo