0
我是新來的意思是堆棧和第一次在AngularJS中編寫代碼，我試圖在下面的index.html文件中實現排序，分頁和過濾。什麼是不正確怎麼想實現，請大家幫忙 這裏是我的index.html文件 -AngularJS中的排序，過濾和分頁
<!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 = "";
}
}
]);你可以使用這個在您的本地蒙戈插入數據 -
db.contactlist.insert({"runId" : "1212","apiName" : "transactions","runTime" : "DateAndTime","Report" : "URL","numOfTestExecuted" : "3","numOfTestFailed" : "3","status" : "Passed"})
提示：您正在使用分頁指令，您還應該爲您的分類創建指令。 – squadwuschel
@squadwuschel - 感謝您的提示，將不勝感激，如果你可以更新代碼。正如我所提到的，我是Angular的新手，在實際編碼的過程中學習。希望我有時間參加課程或課程 – inCode