1

ソート可能なテーブルを作成しようとしています。次のビューとコントローラーを作成しました。

意見：

<div class="container" ng-app>
<div ng-controller="SortableTblCtrl">
    <table class="table table-hover table-bordered span12">
        <tr>
            <th ng-repeat="metadata in metadatas" ng-click="sort('{{metadata.columnProperty}}')" style="cursor: pointer">{{metadata.columnName}} </th>
        </tr>
        <tr ng-repeat="person in persons | orderBy:predicate:reverse">
            <td>{{person.firstName}}</td>
            <td>{{person.lastName}}</td>
        </tr>
    </table>
</div>

コントローラ：

function SortableTblCtrl($scope) {
$scope.persons = [
    { "firstName": "firstname1", "lastName": "lastname1" },
    { "firstName": "firstname2", "lastName": "lastname2" },
    { "firstName": "firstname3", "lastName": "lastname3" }
];
$scope.predicate = "";
$scope.reverse = false;

$scope.sort = function (pred) {
    $scope.predicate = pred;
    $scope.reverse = !$scope.reverse;
};

$scope.metadatas = [
    { "columnProperty": "firstName", "columnName": "First Name" },
    { "columnProperty": "lastName", "columnName": "Last Name" }
];

}

列ヘッダーをクリックしても何も起こりません。私は何かを見つけました。それは、すべての列ヘッダーをクリックしたときに最初の列をソートするように変更ng-click="sort('{{metadata.columnProperty}}')"したときです。ng-click="sort('firstName')"

4

1 に答える 1

1

これ:ng-click="sort('{{metadata.columnProperty}}')"である必要がありますng-click="sort(metadata.columnProperty)"。

于 2013-03-01T14:59:29.200 に答える