HTML:
<div class="page" ng-app="app" data-ng-controller="SearchCtrl">
<section class="panel panel-default">
<div class="panel-heading col-md-12">
<div class="col-md-9" style="padding-left:0px;top:7px;">
<strong> Search Result</strong>
</div>
</div>
<div class="panel-body" style="padding: 0px;">
<div id="loading">
<i class="fa fa-spinner fa-spin fa-4x"></i>Loading Devices....
</div>
<section class="table-flip-scroll">
<div class="col-md-12">
<div class="col-md-2 hidden-sm hidden-xs" style="margin-top:15px;">
<i id="show-result">Showing page {{ currentPage }} / {{ totalPages }}</i>
</div>
</div>
<table class="table table-bordered table-striped cf">
<thead style="color: #333;">
<tr>
<td>
<a ng-click="sortType = 'name'; sortReverse = !sortReverse">Name <span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span><span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a ng-click="sortType = 'type'; sortReverse = !sortReverse">Type <span ng-show="sortType == 'type' && !sortReverse" class="fa fa-caret-down"></span><span ng-show="sortType == 'type' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a ng-click="sortType = 'view'; sortReverse = !sortReverse">View <span ng-show="sortType == 'view' && !sortReverse" class="fa fa-caret-down"></span><span ng-show="sortType == 'view' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
</tr>
</thead>
<tbody>
<tr id="{{cols.view}}" dir-paginate="cols in tableData | orderBy:sortType:sortReverse | filter:searchTable|itemsPerPage:10" current-page="currentPage">
<td>{{ cols.name }}</td>
<td>{{ cols.type }}</td>
<td>{{ cols.view }}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls id="pagination-control" max-size="5" direction-links="true" boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)">
</dir-pagination-controls>
</section>
</div>
</section>
JS:
angular.module("app").controller('SearchCtrl', function($scope, $cookies, $location) {
var jwt_token = $cookies.get("token");
$scope.default = "";
$scope.searchItem = function($event) {
if ($event.which == 13) {
$scope.$watch('$scope.searchTerm', function() {
if ($scope.searchTerm == null || $scope.searchTerm == "") {
bootbox.alert("Search cannot be empty!!");
} else {
$location.path("/search");
var settings = {
"async": true,
"crossDomain": true,
"url": trackFleetServiceUrl + "search/" + $cookies.get("account_id"),
"method": "POST",
"headers": {
"x-access-token": jwt_token,
"content-type": "application/x-www-form-urlencoded",
"cache-control": "no-cache"
},
"data": {
"txt": $scope.searchTerm
}
}
$.ajax(settings).done(function(resp) {
$("#loading").css('display', 'none');
if (resp.status_code == 100 || resp.status_code == 101) {
$cookies.put("status_code", resp.status_code);
$scope.$apply(function() {
$location.path("/signin");
});
notify("error", "top right", "Session Expired", "Please login again.");
} else if (resp.status_code != 200) {
notify("error", "top right", "Fleet", resp.status_message);
} else {
if (resp.response.length == 0) {
bootbox.alert("No result found!!");
} else {
$scope.currentPage = 1;
$scope.tableData = [];
$scope.sortType = 'name'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchTable = ''; // set the default search/filter term
for (var i = 0; i < resp.response.length; i++) {
if (resp.response[i].fleet_id != null && resp.response[i].fleet_id != "null") {
$scope.$apply(function() {
$scope.tableData.push({
name: resp.response[i].fleet_name,
type: "Fleet",
view: resp.response[i].fleet_id
});
});
} else if (resp.response[i].asset_id != null && resp.response[i].asset_id != "null") {
$scope.$apply(function() {
$scope.tableData.push({
name: resp.response[i].asset_name,
type: "Asset",
view: resp.response[i].asset_id
});
});
}
}
console.log($scope.tableData);
}
}
});
$scope.searchTerm = $scope.default;
}
})
}
}
});
标题(HTML,我从中获取搜索字词):
<li class="search-box visible-md visible-lg" ng-controller="SearchCtrl">
<div class="input-group">
<span class="input-group-addon" style="font-size: 20px;"><i class="fa fa-search"></i></span>
<input type="text" class="form-control" placeholder="Search fleet, asset" style="color: #fff;" ng-model="searchTerm" ng-keypress="searchItem($event)">
</div>
</li>
现在,当我搜索任何一个词时,我会得到我服务的回复。在控制台上记录响应时,我得到了正确的结果,但表中没有显示相同的结果。
我不知道我在这里失踪了什么。请帮忙。
P.S。 tr中的tbody,而不是 ng-repeat 我使用 dir-paginate 来添加分页。但是,同样的工作在其他页面/表格上。