Question

我有一个简单的应用程序，它从JSON文件中读取数据并将其显示在网页中。那部分工作正常（显示）。我现在希望能够通过使用AngularJS中的orderBy过滤器切换表格标题来对表格进行排序...但是，这就是我遇到问题的地方。

我可以俯瞰什么？我觉得它与HTTP功能有关...可能会搞乱吗？我不知道为什么这可能是一个问题？

请找我附上的代码。

leads.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body>

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

      <textarea name="name" ng-model = "test"></textarea>

      <h1>{{ count }}</h1>

      <table class="table">
        <thead>
          <tr>
            <th ng-click = "sortBy('first_name')">First Name</th>
            <th ng-click = "sortBy('last_name')">Last Name</th>
            <th ng-click = "sortBy('email')">Email Address</th>
            <th ng-click = "sortBy('accountCreation')">Account Creation</th>

          </tr>
        </thead>
        <tbody>
          <tr ng-repeat = "user in myData | orderBy : orderByThis">
            <td> {{user.first_name}} </td>
            <td> {{user.last_name}} </td>
            <td> {{user.email}} </td>
            <td> {{user.accountCreation}}</td>
          </tr>
        </tbody>
      </table>

    </div>
    <script src="./leadsController.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
  </body>
</html>

leadsController.js

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

app.controller('myCtrl', function($scope, $http) {

  $http.get("leadsData.php").then(function (response) {
      $scope.myData = response.data.records;
  });

  $scope.sortBy = function(x){
    $scope.orderByThis = x;
  };
});

Answer 1

您可以在控制器本身内执行此操作

$scope.sortBy = function(x){
   $scope.myData = $filter('orderBy')($scope.myData, x);
}

并确保注入 $filter

AngularJS HTTP请求与另一个函数

1 个答案: