顯示和隱藏箭頭圖標按角度.js排序

我想顯示和隱藏按照排序箭頭圖標。我在角的js是新請幫助我使用自舉顯示和隱藏箭頭圖標按角度.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>

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

請高興這一點。在此先感謝

來源

2014-12-18 Surajghosi

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

來源

2014-12-18 19:35:28 azium

謝謝你，但是我加入用戶名<跨度類=「glyphicon」ng-class =「{'glyphiconchevronup'：sort.descending，'glyphicon-chevron-down'：！sort.descending}」> > UserType 年齡 Surajghosi

對不起，我不確定是什麼你的意思是......你可以用你的問題做一個jsFiddle或者codepen嗎？ – azium

http://jsfiddle.net/js64b/873/ 當我點擊一個提交然後移動所有箭頭圖標。但我想在一次移動只有一個圖標請提前幫助在此謝謝 – Surajghosi

入住此plunker：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>

來源

2017-01-07 11:50:29

顯示和隱藏箭頭圖標按角度.js排序

回答

相關問題