angularjs – 根据角度.js排序显示和隐藏箭头图标

发布时间：2020-12-17 17:45:37 所属栏目：安全来源：网络整理

导读：我试图按照排序显示和隐藏箭头图标.我是角度js的新人,请帮忙我正在使用bootstrap div ng-controller="PurchasesCtrl" h2Purchases:/h2 table class="table" thead tr th ng-click="changeSorting('username')" UserName span class="glyphicon glyphicon-ch

我试图按照排序显示和隐藏箭头图标.我是角度js的新人,请帮忙
我正在使用bootstrap

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

角度js排序

var myApp = angular.module(“myApp”,[]);

myApp.factory("Purchases",function(){
    var Purchases = {};

    Purchases.data = [
        {
            username: "suraj kumar gosi",usertype: "sponer",age: "20"

        },{
            username: "kao kumar gosi",usertype: "clinet",age: "26"
        },{
             username: "surdfsdfaj kumar gosi",usertype: "clinfsdfset",age: "50"
        }
    ];
    return Purchases;
});

function PurchasesCtrl($scope,Purchases){
    $scope.purchases = Purchases;
    $scope.sort = {
        column: '',descending: false

    };  


    $scope.changeSorting = function(column) {

        var sort = $scope.sort;

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

请听这个.提前致谢

解决方法

更新2：好的,这比我以前的答案要好得多. Fiddle

标记：

<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">

然后在你的控制器中：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!