Question

我试图按照排序显示和隐藏箭头图标。我是角度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;
        }
    };
}

请听到这个。提前谢谢

Answer 1

更新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';
}

Answer 2

检查此弹射器：plunker to show icons on sorting

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

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

和Html如下：

<html>
<head>
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <style>
        body {
            padding-top: 30px;
        } 
        .sortorder:after {
            content: '\25b2';
        } 
        .sortorder.descending:after {
            content: '\25bc';
        }
    </style>
</head>
<body>
    <div class="container" ng-app="bookApp" ng-controller="bookController">
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <td style="width: 70px;">Sr. No.</td>
                    <td ng-click="sort('title')">Book Title
<span class="sortorder descending" ng-hide="(sortKey=='title' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='title' && reverse==false)"></span>
                    </td>
                    <td ng-click="sort('author')">Author
 <span class="sortorder descending" ng-hide="(sortKey=='author' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='author' && reverse==false)"></span>
                    </td>
                    <td ng-click="sort('price')">Price
<span class="sortorder descending" ng-hide="(sortKey=='price' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='price' && reverse==false)"></span>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="book in bookList | orderBy: sortKey:reverse">
                    <td>{{ $index +1 }}</td>
                    <td>{{ book.title }}</td>
                    <td>{{ book.author }}</td>
                    <td>{{ book.price }}</td>
                </tr>
            </tbody>
        </table> 
    </div>
    <script>
        var bookApp = angular.module("bookApp", []);
        bookApp.controller('bookController', function ($scope) {
            $scope.bookList = [
            { "title": "Hobbit", "author": "Aman", "price": 700 },
            { "title": "Lord of the rings", "author": "Sameer", "price": 1000 },
            { "title": "Harry Porter", "author": "Anuj", "price": 650 },
            { "title": "The little prince", "author": "Jatin", "price": 870 },
            { "title": "Angels and Demons", "author": "Shivam", "price": 890 }
            ];
            $scope.reverse = false;
            $scope.sortKey = 'title';

            $scope.sort = function (keyname) {
                $scope.sortKey = keyname;
                $scope.reverse = !$scope.reverse;
            } 
        });
    </script>
</body>
</html>

body {
            padding-top: 30px;
        } 
        .sortorder:after {
            content: '\25b2';
        } 
        .sortorder.descending:after {
            content: '\25bc';
        }

<html>
<head>
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <style>
        body {
            padding-top: 30px;
        } 
        .sortorder:after {
            content: '\25b2';
        } 
        .sortorder.descending:after {
            content: '\25bc';
        }
    </style>
</head>
<body>
    <div class="container" ng-app="bookApp" ng-controller="bookController">
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <td style="width: 70px;">Sr. No.</td>
                    <td ng-click="sort('title')">Book Title
<span class="sortorder descending" ng-hide="(sortKey=='title' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='title' && reverse==false)"></span>
                    </td>
                    <td ng-click="sort('author')">Author
 <span class="sortorder descending" ng-hide="(sortKey=='author' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='author' && reverse==false)"></span>
                    </td>
                    <td ng-click="sort('price')">Price
<span class="sortorder descending" ng-hide="(sortKey=='price' && reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='price' && reverse==false)"></span>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="book in bookList | orderBy: sortKey:reverse">
                    <td>{{ $index +1 }}</td>
                    <td>{{ book.title }}</td>
                    <td>{{ book.author }}</td>
                    <td>{{ book.price }}</td>
                </tr>
            </tbody>
        </table> 
    </div>
    <script>
        var bookApp = angular.module("bookApp", []);
        bookApp.controller('bookController', function ($scope) {
            $scope.bookList = [
            { "title": "Hobbit", "author": "Aman", "price": 700 },
            { "title": "Lord of the rings", "author": "Sameer", "price": 1000 },
            { "title": "Harry Porter", "author": "Anuj", "price": 650 },
            { "title": "The little prince", "author": "Jatin", "price": 870 },
            { "title": "Angels and Demons", "author": "Shivam", "price": 890 }
            ];
            $scope.reverse = false;
            $scope.sortKey = 'title';

            $scope.sort = function (keyname) {
                $scope.sortKey = keyname;
                $scope.reverse = !$scope.reverse;
            } 
        });
    </script>
</body>
</html>

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

2 个答案: