У меня есть простое приложение, которое читает данные из файла JSON и отображает их на веб-странице. Эта часть работает нормально (отображение). Теперь я хочу иметь возможность сортировать таблицу, переключая заголовки таблиц с помощью фильтра orderBy в AngularJS ... однако вот где у меня возникают проблемы.
Что я могу пропустить? Я чувствую, что это связано с функцией 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;
};
});