Question

我有HTML部分，如下所示。我用ng-repeat填充。如果有人可以通过点击表格列来帮助我如何对数据进行排序和反向排序。我试过这种方式，但所有列都访问相同的属性。

<div>
<table class="friends">
    <tr>
        <th ng-repeat="key in keys" ng-click="sortBy(propertyName)">{{key}}</th>
    </tr>
    <tr ng-repeat="friend in friends | orderBy:propertyName:reverse">
        <td ng-repeat="key in keys">{{friend[key]}}</td>
    </tr>
</table>

我的控制器如下：

var friends = [
    {name: 'John',   phone: '555-1212',  age: 10},
    {name: 'Mary',   phone: '555-9876',  age: 19},
    {name: 'Mike',   phone: '555-4321',  age: 21},
    {name: 'Adam',   phone: '555-5678',  age: 35},
    {name: 'Julie',  phone: '555-8765',  age: 29}
];
$scope.keys = {
    first: "name",
    second: "phone",
    third: "age"
};


$scope.propertyName = 'age';
$scope.reverse = true;
$scope.friends = friends;

$scope.sortBy = function(propertyName) {
    $scope.reverse = ($scope.propertyName === propertyName) ?        !$scope.reverse : false;
    $scope.propertyName = propertyName;
};

Answer 1

您需要在代码中进行细微更新。您需要在ng-click而不是propertyName

中传递密钥

这是工作代码。 http://jsfiddle.net/halirgb/Lvc0u55v/

以下是修改后的行：

 <th ng-repeat="key in keys" ng-click="sortBy(key)">{{key}}</th>

AngularJS：如何对具有由angularjs中的ng-repeat填充的标题的表应用排序/反向排序

1 个答案: