Question

我用角度js创建了带分拣机的桌子。
但是我无法向我的代码显示上/下箭头。我做错了什么？

 var app=angular.module("myModule",[])

     .controller("myController",function($scope){

var employees=[
{name:"suha",dob:new Date("november,20,1995"),gender:"female",salary:"57300.00"},
{name:"Yashu",dob:new Date("august,25,1997"),gender:"female",salary:"47653.0000"},
{name:"sneha",dob:new Date("july,30,1999"),gender:"female",salary:"43300.00"}
];
$scope.employees=employees;
$scope.sortColumn="name";
$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 '';
}

});

table,tr,td{
    border:1px solid;
    padding:10px;
}
.arrow-up,.arrow-down{
    width:0;
    height:0;
    border-right: 5px transparent;
    border-left: 5px transparent;
    border-bottom-color: 10px solid black;
    display: inline-block;

}

完整代码：https://jsfiddle.net/4vy9m3h1/

Answer 1

将ng-class添加到th，如下所示

<th ng-click="sortData('name')" ng-class="getSortClass('name')">
  Name
</th>

查看工作fiddle

使用箭头图标更新fiddle：

Answer 2

问题实际上在于你的CSS。这应该有效：

table,tr,td{
    border:1px solid;
    padding:10px;
}

.arrow-up{
    width:10px;
    height:10px;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 10px solid black;
    display: inline-block;
}

.arrow-down{
    width:0;
    height: 0;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 10px solid black;
    display: inline-block;
}

您输入了错误的属性/值，即在此属性border-bottom-color中使用速记。

以角度js显示向上/向下箭头

2 个答案: