Сортировка, фильтрация и разбиение на страницы в AngularJS

0

Я новичок в смысле стека и в первый раз пишу код в AngularJS, я пытаюсь реализовать Sorting, Paging и Filtering в файле index.html ниже. Что-то не так, как я пытаюсь реализовать, пожалуйста, помогите Вот мой файл index.html -

<!DOCTYPE>
<html ng-app="myApp">

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="/bootstrap-theme.min.css">

  <title>eAPI Test Execution Portal</title>
</head>

<body>
  <div class="container" ng-controller="AppCtrl">
    <h1>eAPI Test Execution Portal</h1>

    <table class="table table-fluid">
      <thead>
        <tr>
          <th><a href="" ng-click="orderByField='runId'; reverseSort = !reverseSort">runId</a>
            <th><a href="" ng-click="orderByField='apiName'; reverseSort = !reverseSort">apiName</a>
            </th>
          </th>
          <th><a href="" ng-click="orderByField='runTime'; reverseSort = !reverseSort">runTime</a>
          </th>
          <th><a href="" ng-click="orderByField='Report'; reverseSort = !reverseSort">Report</a>
          </th>
          <th><a href="" ng-click="orderByField='numOfTestExecuted'; reverseSort = !reverseSort">numOfTestExecuted</a>
          </th>
          <th><a href="" ng-click="orderByField='numOfTestFailed'; reverseSort = !reverseSort">numOfTestFailed</a>
          </th>
          <th><a href="" ng-click="orderByField='status'; reverseSort = !reverseSort">status</a>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="text" ng-model="search.runId" placeholder="Search by runId" />
          </td>
          <td>
            <input type="text" ng-model="search.apiName" placeholder="Search by apiName" />
          </td>
          <td>
            <input type="text" ng-model="search.runTime" placeholder="Search by runTime" />
          </td>
          <td>
            <input type="url" ng-model="search.Report" placeholder="Search by Report URL" />
          </td>
          <td>
            <input type="text" ng-model="search.numOfTestExecuted" placeholder="Search by numOfTestExecuted" />
          </td>
          <td>
            <input type="text" ng-model="search.numOfTestFailed" placeholder="Search by numOfTestFailed" />
          </td>
          <td>
            <input type="text" ng-model="search.status" placeholder="Search by status" />
          </td>

        </tr>
        <tr ng-repeat="contact in contactlist">
          <td>{{contact.runId}}</td>
          <td>{{contact.apiName}}</td>
          <td>{{contact.runTime}}</td>
          <td>{{contact.Report}}</td>
          <td>{{contact.numOfTestExecuted}}</td>
          <td>{{contact.numOfTestFailed}}</td>
          <td>{{contact.status}}</td>
        </tr>
        <tr ng-repeat="contact in contactlist | orderBy:predicate:reverse | filter:paginate| filter:search" ng-class-odd="'odd'">
          <td>{{user.runId}}</td>
          <td>{{user.apiName}}</td>
        </tr>
      </tbody>
    </table>
    <pagination total-items="totalItems" ng-model="currentPage" max-size="5" boundary-links="true" items-per-page="numPerPage" class="pagination-sm">
    </pagination>
  </div>
  <script src="/angular.min.js"></script>
  <script src="/controller.js"></script>
</body>

</html>

Вот файл controller.js - (Если вы хотите попробовать в локальном, используя средний стек)

var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http',
  function($scope, $http) {
    console.log("Hello World from controller");


    var refresh = function() {
      $http.get('/contactlist').success(function(response) {
        console.log("I got the data I requested");
        $scope.contactlist = response;
        $scope.contact = "";
      });
    };

    refresh();

    $scope.addContact = function() {
      console.log($scope.contact);
      $http.post('/contactlist', $scope.contact).success(function(response) {
        console.log(response);
        refresh();
      });
    };

    $scope.remove = function(id) {
      console.log(id);
      $http.delete('/contactlist/' + id).success(function(response) {
        refresh();
      });
    };

    $scope.edit = function(id) {
      console.log(id);
      $http.get('/contactlist/' + id).success(function(response) {
        $scope.contact = response;
      });
    };

    $scope.update = function() {
      console.log($scope.contact._id);
      $http.put('/contactlist/' + $scope.contact._id, $scope.contact).success(function(response) {
        refresh();
      })
    };

    $scope.deselect = function() {
      $scope.contact = "";
    }

  }
]);

Вы можете использовать это для вставки данных в локальный Mongo -

db.contactlist.insert({"runId" : "1212","apiName" :     "transactions","runTime" : "DateAndTime","Report" : "URL","numOfTestExecuted" : "3","numOfTestFailed" : "3","status" : "Passed"})
  • 0
    Совет: вы используете директиву для разбиения на страницы, вам также следует создать директиву для сортировки.
  • 0
    @squadwuschel - Спасибо за подсказку, будем благодарны, если вы сможете обновить код. Как я уже говорил, я новичок в Angular и учусь на собственном коде. Жаль, что у меня не было времени, чтобы взять уроки или курс
Теги:
mean-stack

1 ответ

0

Было бы здорово, если бы вы могли сказать мне, что не работает в вашем примере, возможно, было бы лучше немного разобраться в ваших проблемах по трем вопросам:

Сортировка, пейджинг и фильтрация.

Создайте пример для каждого из них и попытайтесь его реализовать, а затем задайте прямо вопрос, что не работает.

→ потому что каждая из проблем может быть решена самостоятельно, а затем вам легче понять, как работает дыра.

вы можете создать отдельную директиву для каждой из ваших проблем.

  • 0
    Спасибо за направление - Проблема 1 - <input type = "text" ng-model = "search.runId" placeholder = "Поиск по runId" /> При этом я ожидаю, что при вводе чего-либо в текстовое поле он найдет все соответствующие runId, как я печатаю. Проблема 2. С этим '<th> <a href="" ng-click="orderByField='runId'; reverseSort = !reverseSort"> runId </a> "я надеялся, что сортировка произойдет при нажатии.
  • 0
    Ваша первая проблема в том, что у вас в таблице два ng-repeat - я не понимаю почему. Но сначала создайте новый тестовый проект, в котором вы можете протестировать каждую отдельную функцию, пока она не будет работать так, как вы хотите, и когда у вас возникнут проблемы, а затем создать для каждой проблемы новую публикацию StackOverflow.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню