在點擊清除按鈕時刪除角度js類

Question

我已經在網格標題中創建了帶有排序選項的角度js數據網格。單擊網格標題可以按照升序/降序排序。我的頁面中有一個清晰的按鈕。點擊清除按鈕，必須刪除現有的排序列類。我已經寫爲下面的代碼，

$scope.clear = function() {   
    $scope.init(); 

    //remove existing sorting columns by using the hasClass 
    if($('.DataGridHeader th').hasClass("active-ascending")) 
    { 
     $('.DataGridHeader th').removeClass("active-ascending"); 
    }else if($('.DataGridHeader th').hasClass("active-descending")) 
    { 
     $('.DataGridHeader th').removeClass("active-descending"); 
    } 

    $(".warning").hide(); 
}; 

<tr class="DataGridHeader"> 
    <th ng-repeat="c in cols" class="sortable active-descending">Type</th> 
</tr> 

任何人都可以建議如何做同樣的，如果沒有else語句？

Answer 1

可以使用納克級，例如：

<div ng-class="{'red': redFlag}"></div> 

見例如：http://jsfiddle.net/ojgax1mb/

Answer 2

參考演示here。

請找到下面的代碼：

HTML：

<div ng-app="app" ng-controller="test"> 
    <table class="table table-bordered"> 
     <thead> 
      <tr> 
       <th ng-repeat="c in cols" ng-click="sort()" class="active-descending" ng-class="{'sortable': isSort}">{{c}}</th> 

      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>Text 11</td> 
       <td>Text 12</td> 
       <td>Text 13</td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>Text 21</td> 
       <td>Text 22</td> 
       <td>Text 23</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>Text 31</td> 
       <td>Text 32</td> 
       <td>Text 33</td> 
      </tr> 
     </tbody> 
    </table> 

    <button class="btn btn-defaukt" ng-click="clear()"> 
     Clear 
    </button> 
</div> 

JS：

var app = angular.module('app', []); 

app.controller('test', function ($scope) { 
    $scope.isSort = false; 

    $scope.sort = function() { 
     $scope.isSort = true; 
    } 

    $scope.clear = function() { 
     $scope.isSort = false; 
    } 

    $scope.cols = ['Sr.', 'Column 1', 'Column 2', 'Column 3'] 
}); 

Answer 3

您可以使用動態類是基於什麼領域的網格目前按排序。這可以在Angular Documentation的修改示例中看到。

變形示例中使用的類和清除按鈕：http://plnkr.co/edit/b0wlqLf3QQx0T5ccdZrP?p=preview

HTML：

<div ng-app="orderByExample" ng-controller="ExampleController"> 
    <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre> 
    <button ng-click="clear()">Clear Sort</button> 
    <table class="friend"> 
     <tr> 
      <th> 
       <button ng-click="order('name')"> 
       Name <i class="sort-icon fa" ng-class="orderClass('name')"></i> 
       </button 
      </th> 
      <th> 
       <button ng-click="order('phone')"> 
       Phone Number <i class="sort-icon fa" ng-class="orderClass('phone')"></i> 
       </button> 
      </th> 
      <th> 
      <button ng-click="order('age')"> 
       Age 
       <i class="sort-icon fa" ng-class="orderClass('age')"></i> 
      </button> 
     </th> 
     </tr> 
     <tr ng-repeat="friend in friends"> 
       <td>{{friend.name}}</td> 
       <td>{{friend.phone}}</td> 
       <td>{{friend.age}}</td> 
     </tr> 
    </table> 
</div> 

JS：

angular.module('orderByExample', []) 
.controller('ExampleController', ['$scope', '$filter', function($scope, $filter) { 
    var orderBy = $filter('orderBy'); 

    $scope.friends = [ 
     { name: 'John', phone: '555-1212', age: 10 }, 
     { name: 'Mary', phone: '555-9876', age: 19 }, 
     { name: 'Mike', phone: '555-4321', age: 21 }, 
     { name: 'Adam', phone: '555-5678', age: 35 }, 
     { name: 'Julie', phone: '555-8765', age: 29 } 
    ]; 

    $scope.order = function(predicate) { 
     $scope.predicate = predicate; 
     $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false; 
     $scope.friends = orderBy($scope.friends, predicate, $scope.reverse); 
    }; 

    $scope.orderClass = function(predicate){ 
     return $scope.predicate === predicate ? ('fa-sort' + ($scope.reverse ? '-desc' : '-asc')) : 'fa-sort'; 
    }; 

    $scope.clear = function(){ 
     $scope.predicate = ''; 
    }; 

    $scope.order('age', true); 
}]); 

Answer 4

您可以嘗試採用了棱角分明的OrderBy

https://docs.angularjs.org/api/ng/filter/orderBy

腳本：https://plnkr.co/edit/3DUqbTNnJ3slk6OclJX5?p=preview

angular.module('orderByExample', []) 
.controller('ExampleController', ['$scope', function($scope) { 
    $scope.friends = 
     [{name:'John', phone:'555-1212', age:10}, 
     {name:'Mary', phone:'555-9876', age:19}, 
     {name:'Mike', phone:'555-4321', age:21}, 
     {name:'Adam', phone:'555-5678', age:35}, 
     {name:'Julie', phone:'555-8765', age:29}]; 
    $scope.predicate = 'age'; 
    $scope.reverse = true; 
    $scope.order = function(predicate) { 
    $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false; 
    $scope.predicate = predicate; 
    }; 

    $scope.clear = function(){ 
    $scope.predicate = ''; 
    }; 

}]);