在角JS切換自定義排序圖標

我一直在試圖把一個自定義網格樣式和排序的角度JS圖標，並succeded做到目前爲止還只是排序圖標在角JS切換自定義排序圖標

這裏的觸發是我的HTML代碼頭

<div ng-app="myApp"> 
    <div ng-controller="TableCtrl"> 

     <table class="MmTable"> 
      <thead class="TblRow HeaderRow"> 
       <tr> 
        <th class="TblHeader TblHeaderSortable SortIndex0 Column0" style="text-align: left;"> 
         <i ng-click="sort('Subsidiary',$event)" class="SortDesc"> 
          Subsidiary 
          <span class="{{Header[0]}}"></span> 
         </i> 

        </th></theah></table>

這裏是排序函數

$scope.sort = function (sortBy,event,element) { 
    $scope.resetAll(); 

    $scope.columnToOrder = sortBy; 
    $scope.sortingOrder = 'asc'; 
    //$(element).removeClass('SortDesc'); 
    //$(element).addClass('SortAsc'); 

    //$Filter - Standard Service 
    $scope.filteredList = $filter('orderBy')($scope.filteredList, $scope.columnToOrder, $scope.reverse); 

    if ($scope.reverse) 
     iconName = 'glyphicon glyphicon-chevron-up'; 
    else 
     iconName = 'glyphicon glyphicon-chevron-down'; 


    $(this).removeClass('SortDesc'); 
    if ($(this).hasClass("SortDesc")) { 

     $(this).removeClass().addClass('SortAsc'); 


    } else { 
     $(this).removeClass().addClass('SortDesc'); 
    } 

    if (sortBy === 'Subsidiary') { 
     $scope.Header[0] = iconName; 
    } 
    else if (sortBy === 'name') { 
     $scope.Header[1] = iconName; 
    } else { 
     $scope.Header[2] = iconName; 
    } 

    $scope.reverse = !$scope.reverse; 

    $scope.pagination(); 
};

如，在上面的代碼我試圖操縱DOM，然後發現不能做，在abgular。所以，嘗試witng樣式也沒有工作。只需要一點幫助切換排序圖標，因爲我想把自定義類和desc排序

來源

2014-08-28 user3631413

你可以切換某些Font Awesome圖標是這樣的。 ..

HTML：

<tr ng-controller="toggleController as tc"> 
    <th ng-click="tc.toggle('name')">Name 
    <i ng-class="tc.nameDesc ? 'fa fa-toggle-down' : 'fa fa-toggle-up'"></i> 
    </th> 
    <th ng-click="tc.toggle('date')">Date 
    <i ng-class="tc.dateDesc ? 'fa fa-toggle-down' : 'fa fa-toggle-up'"></i> 
    </th> 
</tr>

的Javascript：

angular.module("toggleApp", []).controller('toggleController', function() { 
    this.toggle = function (property) { 
    this.nameDesc = (property === 'name') ? !this.nameDesc : this.nameDesc; 
    this.dateDesc = (property === 'date') ? !this.dateDesc : this.dateDesc; 
    } 
});

Here's the fiddle。

來源

2014-12-10 02:07:48 bholben

一種解決方案是保留一個布爾變量在你的範圍內，讓sortAscending =「true」，當你排序按descding順序將值更改爲false。

在你的HTML，您可以使用這樣的事情

ng-class="sortAscending ?'ascClass':'desClass'"

工作例如：http://jsfiddle.net/uev10oru/

添加新的工作示例與切換按鈕 http://jsfiddle.net/uev10oru/1/

來源

2014-08-28 05:20:42 coder

在這給它的語法錯誤意想不到： – user3631413 2014-08-28 05:29:24

仍然不正確的方式給予lexixal錯誤，如果我這樣做 ng-class =「{'SortAsc'：sortAscending（）}」，那麼它的好但三元運算符導致問題 – user3631413 2014-08-28 05:43:54

你可能會混合單/雙引號，參考一個工作示例http://jsfiddle.net/uev10oru/，將true更改爲false以查看更改 – coder 2014-08-28 05:48:41

在角JS切換自定義排序圖標

回答

相關問題