Question

我尝试在表标题的点击事件中对表数据进行排序。但无法相应地看到上/下图标。我的代码的Codepen是here

请告诉我我在哪里做错了。

这是我的代码

AngularJS

var myApp = angular.module("myModule", []);
myApp.controller("sortctrl", function ($scope) {
var students = [{
    "name": "Shirl MacCallister",
    "class": 7,
    "section": "B",
    "rollno": 203,
    "gender": "Female"
}, {
    "name": "Florance Skilbeck",
    "class": 6,
    "section": "A",
    "rollno": 240,
    "gender": "Female"
}];

 it'll work
$scope.students = students;
$scope.sortcolumn = "rollno";
$scope.reversesort = false;
$scope.sortdata = function (column) {
    $scope.reversesort = ($scope.sortcolumn == column) ? !$scope.reversesort : false;
    $scope.sortcolumn = column;
}
$scope.getsortclass = function (column) {
    if ($scope.sortcolumn == column) {
        return $scope.reversesort ? '.arrow-down' : '.arrow-up'
    }
    return '';
} });

HTML

 <body ng-app="myModule">
<div class="container" ng-controller="sortctrl">
    <br><br>
    <table class="table">
        <thead>
        <tr role="button" style="cursor: pointer">
            <th ng-click="sortdata('name')">Name<div ng-class="getsortclass('name')"></div></th>
            <th ng-click="sortdata('rollno')">Roll No.<div ng-class="getsortclass.('rollno')"></div></th>
            <th ng-click="sortdata('class')">Class<div ng-class="getsortclass.('class')"></div></th>
            <th ng-click="sortdata('section')">Section<div ng-class="getsortclass.('section')"></div></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="student in students | orderBy:sortcolumn:reversesort" >
            <td>{{ student.name }}</td>
            <td>{{ student.rollno }}</td>
            <td>{{ student.class }}</td>
            <td>{{ student.section }}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>

请不要将此问题标记为重复，我还没有找到解决我在S / O上的问题的方法

Answer 1

以下是工作版本：https://codepen.io/anon/pen/yvPvEB

您需要删除

getsortclass来电时的点（getsortclass('')，而非getsortclass.('')）
getsortclass中的班级名称之前的点（'arrow-down'，而不是'.arrow-down'）

AngularJS排序/缩小图标不可见

1 个答案: