我从未在前端工作过，但我必须在前端完成一些任务，例如搜索，排序和分页。我的数据已转储到Mongo DB中。我已经选择了相同的代码。代码使用angularJS作为前端，然后从JSON文件获取硬编码数据。
index.html
<!doctype html>
<html lang="en" ng-app="angularTable">
<head>
<meta charset="utf-8">
<title>Search Sort and Pagination in Angular js</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div role="main" class="container theme-showcase">
<div class="" style="margin-top: 90px;">
<div class="col-lg-8">
<div class="page-header">
<h2 id="tables">Search Sort and Pagination in Angular js</h2>
</div>
<div class="bs-component" ng-controller="listdata">
<div class="alert alert-info">
<p>Sort key: {{sortKey}}</p>
<p>Reverse: {{reverse}}</p>
<p>Search String : {{search}}</p>
</div>
<form class="form-inline">
<div class="form-group">
<label>Search</label> <input type="text" ng-model="search"
class="form-control" placeholder="Search">
</div>
</form>
<table class="table table-striped table-hover">
<thead>
<tr>
<th ng-click="sort('id')">Id <span
class="glyphicon sort-icon" ng-show="sortKey=='id'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('Country')">First Name <span
class="glyphicon sort-icon" ng-show="sortKey=='first_name'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('Description')">Last Name <span
class="glyphicon sort-icon" ng-show="sortKey=='last_name'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('Points')">Points <span
class="glyphicon sort-icon" ng-show="sortKey=='Points'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('Price')">Price <span
class="glyphicon sort-icon" ng-show="sortKey=='Price'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('Province')">Province <span
class="glyphicon sort-icon" ng-show="sortKey=='Province'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('Region_1')">Region_1 <span
class="glyphicon sort-icon" ng-show="sortKey=='Region_1'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('Region_2')">Region_2 <span
class="glyphicon sort-icon" ng-show="sortKey=='Region_2'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('Variety')">Variety <span
class="glyphicon sort-icon" ng-show="sortKey=='Variety'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('Winery')">Winery <span
class="glyphicon sort-icon" ng-show="sortKey=='Winery'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
</tr>
</thead>
<tbody>
<tr
dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
<td>{{user.id}}</td>
<td>{{user.first_name}}</td>
<td>{{user.last_name}}</td>
<td>{{user.hobby}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="5" direction-links="true"
boundary-links="true"> </dir-pagination-controls>
</div>
</div>
</div>
</div>
<script src="lib/angular/angular.js"></script>
<script src="lib/dirPagination.js"></script>
<script src="app/app.js"></script>
</body>
</html>
此html使用app.js
var app = angular.module('angularTable', ['angularUtils.directives.dirPagination']);
app.controller('listdata',function($scope, $http){
$scope.users = []; //declare an empty array
$http.get("mockJson/mock.json").success(function(response){
$scope.users = response; //ajax request to fetch data into $scope.data
});
$scope.sort = function(keyname){
$scope.sortKey = keyname; //set the sortKey to the param passed
$scope.reverse = !$scope.reverse; //if true make it false and vice
versa
}
});
此文件调用嘲笑.json，其中有要显示的数据。你能告诉我如何将我的应用程序连接到mongoDb并将其显示为json文件。或者，如果我可以更新现有代码中的任何内容，以便显示mongoDB中的数据。