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

我已经创建了具有角度js的分类器的表格。
但我无法显示向上/向下箭头到我的代码。我做错了什么？以角度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/

来源

2017-03-07 user7397787

您正在获取Uncaught ReferenceError：angular是不是定义错误？ –

Yah.In在我的本地得到正确的输出只有箭头不显示。但是这里得到'未捕获的参考错误'我不知道为什么，我应该添加任何参考？ – user7397787

请确保您的代码正常工作，以便我可以帮助您更换小提琴 –

添加ng-class到th像下面

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

见工作fiddle

更新带有箭头图标的fiddle：

来源

2017-03-07 05:59:44

非常感谢。小提琴工作良好。请检查箭头不显示 – user7397787

@ user7397787这是问题与CSS。参考http://stackoverflow.com/questions/11712011/how-to-create-uparrow-downarrow-using-simple-css –

@ user7397787检查更新的[小提琴]（https://jsfiddle.net/gangadharjannu/1xkkucpv/ ） –

问题实际上存在于您的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内速记。

来源

2017-03-07 06:10:09

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

回答

相关问题