单击清除按钮删除 Angular 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>

谁能建议在没有 if else 语句的情况下如何做同样的事情？

Answer 1

可以使用ng-class，例如：

<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

您可以尝试使用 angular 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 = '';
  };

}]);