AngularJS表没有显示数据

时间:2016-08-22 07:18:01

标签: javascript angularjs angularjs-ng-repeat

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 来添加分页。但是,同样的工作在其他页面/表格上。

0 个答案:

没有答案