Question

我是新手，意味着堆栈，并且第一次在AngularJS中编写代码，我正在尝试在index.html文件下面实现排序，分页和过滤。我试图实施的方式并不正确，请提供帮助这是我的index.html文件 -

＆＃13;

<!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>

＆＃13;

这是controller.js文件 - （如果你想在你的本地尝试，使用平均堆栈）

＆＃13;

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 = "";
    }

  }
]);

＆＃13;

您可以使用它在本地Mongo中插入数据 -

db.contactlist.insert({"runId" : "1212","apiName" :     "transactions","runTime" : "DateAndTime","Report" : "URL","numOfTestExecuted" : "3","numOfTestFailed" : "3","status" : "Passed"})

Answer 1

如果你能告诉我在你的例子中没有工作，那会很酷，或许最好将你的问题深入研究三个问题：

排序，分页和过滤。

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

- ＆GT;因为每个问题都可以独立解决，然后你就更容易理解这个洞是如何协同工作的。

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

AngularJS中的排序，过滤和分页

1 个答案: