AngularJS / 使用自定义方法替换 ng-click 和 ng-show 中的排序答案

【问题标题】：AngularJS / Replace Sorting within ng-click and ng-show with custom methodAngularJS / 使用自定义方法替换 ng-click 和 ng-show 中的排序
【发布时间】：2019-03-10 13:55:24
【问题描述】：

我有一组表格列。每列可以直接和反向排序。到目前为止，我们在每个 ng-click 和 ng-show 内部都进行了排序，如下所示：

HTML

<a style="color:black" href="" ng-click="sortReverse = !sortReverse; changeSortType('id')">
  Group id
  <span ng-show="sortType == 'id' && !sortReverse" class="fa fa-caret-down"></span>
  <span ng-show="sortType == 'id' && sortReverse" class="fa fa-caret-up"></span>
</a></th>

控制器

  $scope.sortType = 'count';
  $scope.sortReverse = true;

  $scope.changeSortType = function (sortType){
    $scope.sortType = sortType;
  };

  $scope.itemSortValue = function (item) {
    return Service.sort(item, $scope.sortType)
  };

现在我们想用一个方法替换它，它的作用相同，这样我们就可以减少 HTML 中的代码量。

我不知道如何在 AngularJS 中做到这一点。我做什么都行不通。我也看到了几个答案，但它们不起作用，或者我做错了什么。 你能帮我写代码吗？

【问题讨论】：

你想用方法替换什么？你能展示你想要实现的目标吗？
我想使用自定义方法通过 ng-click 删除排序。意味着将所有逻辑移动到控制器，如下所示：。从这个 ng-click="sortReverse = !sortReverse;changeSortType('id')" => ng-click=changeSortType('id')" 。ng-show 的原理也是一样的。这是一个工作任务，而且我们有大量的表格，所以我们想将HTML中每一列的逻辑删除到控件中。希望我回答了你的问题。
sortReverse 是范围变量吗？
我相信是的。这段代码很旧，我们正在清理它。我对angularjs也不是很好。所以，对不起，如果我说愚蠢的话。
如果您需要指令或服务中的代码，请告诉我您想要什么，我可以找到它..

标签： javascript angularjs sorting

【解决方案1】：

对于<a> 元素，从ng-click 中移除sortReverse = !sortReverse; 并在方法changeSortType 的第一行添加$scope.sortReverse= !$scope.sortReverse；

and for ng-show create and method

$scope.myMethod = function (id, reverse){
    return id && reverse;
  };

把html改成

 <span ng-show="myMethod('id',!sortReverse)" class="fa fa-caret-down"></span>
  <span ng-show="myMethod('id',sortReverse)" class="fa fa-caret-up"></span>

【讨论】：

我有一个问题。正如我所说，我有多个表格列。比方说，“身份证、数字、动物等”。我是否也需要将这些作为参数传递给自定义方法，如果是，如何？像这样：$scope.myMethod = function(id, number, animals, reverse) { return ????}。我知道我是菜鸟，但请多多包涵……
没关系...是的，它就像一个普通的方法，如果你的方法需要这些参数，那么你可以传递它们并根据它定义你的方法签名
我试过了，但我得到一个错误 sortReserve 没有定义。它指的是你在changeSortType函数中提到的添加。
表示它不是作用域变量，可以添加完整的html代码和对应的控制器吗？
这不是完整的文件，因为它们都是 300 行长，但我们最可能需要的部分在那里......

【解决方案2】：

试试这个代码。

HTML

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

<div ng-app="myApp" ng-controller="customersCtrl">
<div class="jumbotron bg-dark" style="border-radius: 0px; margin-bottom: 0px;">
        <h1 class="text-center" style="color:azure;">Table Sort</h1> 
</div>
 <table class="table table-dark table-striped">
    <thead>
      <tr>
        <th ng-click="orderByMe('Name')" style="cursor: pointer;">Name <i class="fa fa-sort-desc" style="font-size:15px;color: whitesmoke" ng-if=" toggleCursor == 'desc'"></i>  <i class="fa fa-sort-asc" ng-if=" toggleCursor == 'asc'"></i></th>
        <th style="cursor: pointer;">City </th>
        <th style="cursor: pointer;"> Country</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat=" data in myData  | orderBy:myOrderBy">
       <th>{{data.Name}}</th>
       <th>{{data.City}}</th>
       <th>{{data.Country}}</th>
      </tr>
    </tbody>
  </table>

</div>
</body>
</html>

JS 文件

 var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
        $http.get("https://www.w3schools.com/angular/customers.php").then(function(response) {
            $scope.myData = response.data.records;
        });
        $scope.toggleCursor = 'desc';
        $scope.myOrderBy = 'Name';
        $scope.orderByMe = function(sort) {
             $scope.myOrderBy = sort;
             $scope.sortArry = $scope.myData.sort();
             if($scope.toggleCursor == 'desc')
                {
                    $scope.toggleCursor = 'asc';
                    $scope.myOrderBy = $scope.sortArry;
                }        
             else
             {
                 $scope.toggleCursor = 'desc';
                 $scope.myOrderBy =  $scope.sortArry.reverse();
             }
        }
    });

【讨论】：