时间戳

首页 > 解决方案 > AngularJS HTTP请求与另一个功能

php - AngularJS HTTP请求与另一个功能

问题描述

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

我可能会忽略什么？我觉得它与 HTTP 函数有关……这可能会弄乱它吗？我不知道为什么这可能是一个问题？

请在附件中找到我的代码。

线索.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>

引导控制器.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;
  };
});

标签： phpangularjsajaxhttpcontroller

解决方案

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

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

并确保注入$filter

推荐阅读