CODEWITHSUNDEEP
angularjs
user7397787
user7397787

Reputation: 1470

Displaying up/down arrows in angular js

I have created table with sorter in angular js.
But I am unable to display up/down arrows to my code.What did I do wrong?

 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;

}

Complete code: https://jsfiddle.net/4vy9m3h1/

Upvotes: 0

Views: 3164

Answers (2)

Gangadhar Jannu
Gangadhar Jannu

Reputation: 4414

Add ng-class to th like below

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

See the working fiddle

Updated fiddle with arrow icons:

Upvotes: 2

Heri Hehe Setiawan
Heri Hehe Setiawan

Reputation: 1633

The problem actually lies on your CSS. This should work:

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

You've entered a wrong property/value, i.e. using shorthand within this property border-bottom-color.

Upvotes: 1

Related Questions