角度jsに上下矢印を表示

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

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

以下のように更新作業fiddle

を参照してくださいthにng-classを追加fiddle（矢印アイコン付き）：

Answer 2

問題は実際にあなたのCSSにあります。これは動作するはずです：あなたはすなわち、このプロパティborder-bottom-color内速記を使用して、間違ったプロパティ/値を入力した

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; 
} 

。