AngularJS HTTP Request with another function

Question

I have a simple app that reads data from a JSON file and displays it in a webpage. That part works fine (the displaying). I now want to be able to sort through the table by toggling on the table headers using the orderBy filter in AngularJS ... however, that's where I have issues.

What may I be overlooking? I feel like it has to do with the HTTP Function ... could that be messing with it? I don't know why that may be an issue though?

Please find my code attached.

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

You can do this inside the controller itself

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

and make sure to inject $filter

AngularJS HTTP Request with another function

Question

1 answers

solution1
1 ACCPTED 2018-04-27 02:14:28

AngularJS HTTP Request with another function

Question

1 answers

solution1 1 ACCPTED 2018-04-27 02:14:28

solution1
1 ACCPTED 2018-04-27 02:14:28