Angularjs 根据angular.js中的排序显示和隐藏箭头图标

我试图根据排序显示和隐藏箭头图标。我是新来的，请帮忙 我正在使用引导

<div ng-controller="PurchasesCtrl">
    <h2>Purchases:</h2>
    <table class="table">
    <thead>
        <tr >

            <th  ng-click="changeSorting('username')" >UserName <span  class="glyphicon glyphicon-chevron-up"></span><span  class="glyphicon glyphicon-chevron-down"></span></th>
            <th   ng-click="changeSorting('usertype')">UserType</th>
            <th  ng-click="changeSorting('age')" >Age</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="purchase in purchases.data|orderBy:sort.column:sort.descending">

            <td >{{purchase.username}}</td>
            <td>{{purchase.usertype}}</td>
            <td>{{purchase.age}}</td>
        </tr>
        </tbody>
    </table>
</div>

---

请把这件事告诉我。提前感谢更新2：好的，这比我以前的答案好多了

标记：

<th ng-click="changeSorting('username')">
    UserName 

    <!-- <i> is common for icons -->
    <i class="glyphicon" ng-class="getIcon('username')"></i>
</th>
...

<tr ng-repeat="purchase in purchases.data | 
               orderBy:sort.active:sort.descending">

检查此plunker：

我们可以使用css和一个函数来排序，而不是使用额外的函数来更改图标：`$scope.reverse=false； $scope.sortKey='title'

        $scope.sort = function (keyname) {
            $scope.sortKey = keyname;
            $scope.reverse = !$scope.reverse;
        } `

和Html格式如下：

身体{
填充顶部：30px；
} 
.索托德：之后{
内容：'\25b2'；
} 
.排序器.下降：在{
内容：'\25bc'；
}
高级专员。
书名
作者
价格
{{$index+1}}
{{book.title}}
{{book.author}}
{{book.price}}
var bookApp=angular.module（“bookApp”，[]）；
bookApp.controller（'bookController'，函数（$scope）{
$scope.bookList=[
{“标题”：“霍比特人”，“作者”：“阿曼”，“价格”：700}，
{“标题”：“指环王”，“作者”：“萨米尔”，“价格”：1000}，
{“标题”：“哈里·波特”，“作者”：“阿努伊”，“价格”：650}，
{“标题”：“小王子”，“作者”：“贾丁”，“价格”：870}，
{“标题”：“天使与魔鬼”，“作者”：“湿婆”，“价格”：890}
];
$scope.reverse=false；
$scope.sortKey='title'；
$scope.sort=函数（键名）{
$scope.sortKey=keyname；
$scope.reverse=！$scope.reverse；
} 
});

正文{
填充顶部：30px；
} 
.索托德：之后{
内容：'\25b2'；
} 
.排序器.下降：在{
内容：'\25bc'；
}

身体{
填充顶部：30px；
} 
.索托德：之后{
内容：'\25b2'；
} 
.排序器.下降：在{
内容：'\25bc'；
}
高级专员。
书名
作者
价格
{{$index+1}}
{{book.title}}
{{book.author}}
{{book.price}}
var bookApp=angular.module（“bookApp”，[]）；
bookApp.controller（'bookController'，函数（$scope）{
$scope.bookList=[
{“标题”：“霍比特人”，“作者”：“阿曼”，“价格”：700}，
{“标题”：“指环王”，“作者”：“萨米尔”，“价格”：1000}，
{“标题”：“哈里·波特”，“作者”：“阿努伊”，“价格”：650}，
{“标题”：“小王子”，“作者”：“贾丁”，“价格”：870}，
{“标题”：“天使与魔鬼”，“作者”：“湿婆”，“价格”：890}
];
$scope.reverse=false；
$scope.sortKey='title'；
$scope.sort=函数（键名）{
$scope.sortKey=keyname；
$scope.reverse=！$scope.reverse；
} 
});

谢谢，但我正在添加用户名UserType Age，然后相互影响图标我想要一次移动一次抱歉，我根本不知道你的意思。。你能用JSFIDLE或codepen解决你的问题吗？当我点击一个文件，然后移动所有箭头图标。但是我想一次只移动一个图标，请在此方面提供帮助，提前感谢，请帮助我。这对我来说很重要，这次我想把默认排序设置为StartDate。不显示任何星星图标

$scope.sort = {
  active: '',
  descending: undefined
}     

$scope.changeSorting = function(column) {

  var sort = $scope.sort;

  if (sort.active == column) {
     sort.descending = !sort.descending;
  } 
  else {
    sort.active = column;
    sort.descending = false;
  }
};

$scope.getIcon = function(column) {

  var sort = $scope.sort;

  if (sort.active == column) {
    return sort.descending
      ? 'glyphicon-chevron-up'
      : 'glyphicon-chevron-down';
    }

  return 'glyphicon-star';
}

        $scope.sort = function (keyname) {
            $scope.sortKey = keyname;
            $scope.reverse = !$scope.reverse;
        } `