AngularJS中的排序、过滤和分页

Sorting,Filtering and Pagination in AngularJS

本文关键字：过滤 分页 排序 AngularJS      更新时间：2023-09-26

我是mean stack的新手，第一次用AngularJS编写代码，我试图在下面的index.html文件中实现排序、分页和过滤。我试图实现的方式有些不正确，请帮助这是我的index.html文件-

<!DOCTYPE>
<html ng-app="myApp">
<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/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="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
  <script src="controllers/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"})

如果你能告诉我你的例子中有什么不起作用，那就太酷了，也许最好把你的问题深入到三个问题中：

排序、分页和筛选。

为每一个都创建一个例子，并尝试实现它，然后直接问什么不起作用。

->因为每个问题都可以独立解决，这样你就更容易理解空穴是如何协同工作的。

你可以为你的每个问题创建一个独立的指令。

相关文章：