Fatal编程技术网
  • javascript/
  • Javascript AngularJS/替换ng中的排序单击并使用自定义方法显示ng

Javascript AngularJS/替换ng中的排序单击并使用自定义方法显示ng

javascript angularjs sorting

Javascript AngularJS/替换ng中的排序单击并使用自定义方法显示ng,javascript,angularjs,sorting,Javascript,Angularjs,Sorting,我有一组表列。每列可以按直线和反向排序。到目前为止，我们在每个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-ca

我有一组表列。每列可以按直线和反向排序。到目前为止，我们在每个
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>
现在我们想用一个方法来代替它，这个方法也可以这样做，这样我们就可以减少HTML中的代码量。

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

对于
元素删除
sortReverse=！巫术诗从ng单击并添加
$scope.sortReverse=$scope.sortReverse
它位于方法更改器类型的第一行

对于ng show的创建和方法


$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>





尝试使用此代码

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>



你想用方法替换什么？你能展示一下你想要实现什么吗？我想用一个自定义方法通过点击ng来移除排序。意思是将所有逻辑移动到控制器，如下所示：。从这个ng click=“sortReverse=！sortReverse；changeSortType（'id'）”=>ng click=changeSortType（'id'））“。同样的原则也适用于ng秀。这是一项工作任务，我们有大量的表，所以我们希望删除HTML中每个列到控件的逻辑。我希望我回答了你的问题。sortReverse是范围变量吗？我想是的。这段代码很旧，我们正在清理它。我对angularjs也不是很好。所以，如果我说了愚蠢的话，对不起。如果你需要指令或服务的代码，告诉我你想要什么，我就能找到。我有个问题。正如我所说，我有多个表列。比如说，“id、数字、动物等”。我是否也需要将这些作为参数传递给自定义方法，如果需要，如何传递？类似的：$scope.myMethod=function（id，number，animals，reverse）{return？？}。我知道我是一个noob，但请容忍我…这没关系…是的，这就像一个普通的方法，它接受参数，如果你的方法需要这些参数，那么你可以传递它们，并根据它们定义你的方法签名。我试过了，但我得到了一个错误，sortReserve没有定义。它指的是您在changeSortType函数中提到的添加。这意味着它不是一个范围变量。您可以添加完整的html代码和相应的控制器吗？它不是完整的文件，因为它们都有300行长，但我们最可能需要的部分在那里。。。

<!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>



 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();
             }
        }
    });