angularjs 数据未显示在 table 中

Question

我正在创建一个 Web 应用程序，我在其中使用 angularjs 进行 SQL 连接。

我有两个用户（admin、Regional Partner Manager）管理员的数据在我的 table 上正确显示，但区域合作伙伴经理的数据未显示。

这是我的 js 文件：

$scope.getsonvindata = function () {
            $scope.loadimage = true;
            $scope.names = '';
            $scope.resetfilters();
            //$scope.area = location;
            // get sonvin data list and stored in sonvinrpm $scope variable 
            $http.get('/angularwebservice/frmcosonvinrpm4.asmx/frmsonvinrpm', {
                params: {
                    log: log,
                    from: $scope.from,
                    to: $scope.to,
                    pm: pm
                }
            })
            .then(function (response) {
                $scope.sonvinrpm = response.data.procompanysonVin;
                console.log($scope.sonvinrpm);
                //pagination
                $scope.totalItems = $scope.sonvinrpm.length;
                $scope.numPerPage = 50000;
                $scope.paginate = function (value) {
                    var begin, end, index;
                    begin = ($scope.currentPage - 1) * $scope.numPerPage;
                    end = begin + $scope.numPerPage;
                    index = $scope.sonvinrpm.indexOf(value);
                    return (begin <= index && index < end);
                };

                $scope.loadimage = false;
                if ($scope.sonvinrpm == '') {
                    $scope.errormessage = 'Data Not Found... Please Select Correct Date Range';
                }
                else {
                    $scope.errormessage = '';
                }
            });

我的table:

 <table id="table" class="table table-bordered font" style="width: 110%;">
                    <thead>
                        <tr class="bg-primary">
                            <th>Edit</th>
                            <th><a href="#" ng-click="order('name')" class="erp-tb-a">SrNo</a></th>
                            <th><a href="#" ng-click="order('date')" class="erp-tb-a">Date</a></th>
                            <th><a href="#" ng-click="order('venuename')" class="erp-tb-a">Hotel/School</a></th>
                            <th><a href="#" ng-click="order('venue')" class="erp-tb-a">Venue</a></th>                                 
                            <th><a href="#" ng-click="order('zone')" class="erp-tb-a">Zone</a></th>
                            <th><a href="#" ng-click="order('location')" class="erp-tb-a">Location</a></th>
                            <th><a href="#" ng-click="order('starttime')" class="erp-tb-a">Start Time</a></th>             
                            <th><a href="#" ng-click="order('brand')" class="erp-tb-a">Brand Name</a></th>
                            <th><a href="#" ng-click="order('program')" class="erp-tb-a">Program</a></th>

                            <%--<th>Count</th>--%>                         
                        </tr>
                    </thead>
                    <tbody>
                    <tr class="bg-primary">
                        <td><i class="glyphicon glyphicon-filter"></i></td>
                        <td></td>
                        <%--<th>SonvinId</th>--%>
                        <td>
                            <div class="left-margin form-control-wrapper form-group has-feedback has-feedback">
                                <input type="text" class="date floating-label erp-input" ng-model="search.date" placeholder="Date">
                            </div>
                        </td>
                        <td>
                            <input type="text" ng-model="search.venuename" placeholder="Hotel/School" class="erp-input" /></td>
                        <td>
                             <input type="text" ng-model="search.venue" placeholder="Venue" class="erp-input" />
                        </td>
                        <%--<th>Day</th>--%>
                        <%--<th>Company</th>--%>
                       <td>
                            <input type="text" ng-model="search.zone" placeholder="Zone" class="erp-input" /></td>
                        <td>
                            <input type="text" ng-model="search.location" placeholder="Location" class="erp-input"></td>
                        <td>
                            <%--<div class="form-control-wrapper"> id="time"--%>
                                <input type="text" ng-model="search.starttime" class="floating-label erp-input" placeholder="Start Time">
                            <%--</div>--%>
                        </td>
                        <%-- <th>End</th>--%>
                        <%--<th>Hrs</th>--%>
                         <td>
                            <input type="text" ng-model="search.brand" placeholder="Brand Name" class="erp-input" /></td>
                        <td>
                            <input type="text" ng-model="search.program" placeholder="Program" class="erp-input" /></td>                          
                    </tr>
                    <%--| filter :{date: mddate,brand: mdbrand, zone: mdzone, location: mdlocation, starttime: mdstart,program: mdprogram,venuename: mdvenuename,venue: mdvenue }--%>
                    <tr ng-repeat="x in sonvinrpm | orderBy:predicate:reverse | filter:paginate| filter:search">
                        <td><button type="button" ng-click="getassigntrainerdata(x)" class="btn btn-sm btn-primary" data-controls-modal="modal-from-dom" data-backdrop="static" data-keyboard="true" data-toggle="modal" data-target="#assigntrainermodel"><i class="glyphicon glyphicon-pencil"></i></button></td>
                        <td>{{x.srno}}</td>
                        <%--<td>{{x.sonvinid}}</td>--%>
                        <td>{{x.date}}</td>

                        <td class="bg-success"><a ng-bind="x.venuename" ng-click="DetailsFunction(x)" class="erp-table-a" data-controls-modal="modal-from-dom" data-backdrop="static" data-keyboard="true" data-toggle="modal" data-target="#Detailsmodel"></a></td>
                        <td>{{x.venue}}</td>
                        <%-- <td>{{x.day}}</td>--%>
                        <%--<td>{{x.company}}</td>--%>                         
                        <td>{{x.zone}}</td>
                        <td>{{x.location}}</td>
                        <td>{{x.starttime}}</td>
                        <%--<td>{{x.endtime}}</td>--%>
                        <%--<td>{{x.hrs}}</td>--%>
                        <td>{{x.brand}}</td>
                        <td>{{x.program}}</td>
                       <%--<td>count</td>--%>
                    </tr>   
                    <tr>
                        <td colspan="12"><pagination total-items="totalItems" ng-model="currentPage" max-size="5" boundary-links="true" items-per-page="numPerPage" class="pagination-sm"></pagination></td>
                    </tr>  
                        </tbody>                                     
                </table>

现在我从我的区域合作伙伴经理的网络服务中获取的数据：

{"procompanysonVin":[{"srno":1,"sonvinid":null,"id":3401,"date":"22-10-2016","day":"Sat       ","company":24,"brand":"QED - TM","zone":"East","location":"Kolkata ","starttime":"10:00","endtime":"12:00","hrs":"02:00:00  ","program":"HBKBH","venuename":" NARAYANA SCHOOL","venue":" SITLA ASANSOL"},{"srno":2,"sonvinid":null,"id":3400,"date":"23-10-2016","day":"Sun       ","company":24,"brand":"QED - TM","zone":"East","location":"Kolkata ","starttime":"10:00","endtime":"12:00","hrs":"02:00:00  ","program":"HBKBH","venuename":"NARAYANA SCHOOL","venue":" BENGAL AMBUJA HOUSING COMPLEX AMBUJA DURGAPUR WEST BENGAL"}]}

数据正在进入我的网络服务，这里有什么问题吗？

注意：管理员的数据打印在我的 table 上，但不是区域合作伙伴经理的数据

Answer 1

在.then(function ()中你设置了

$scope.sonvinrpm = response.data.procompanysonVin;

但是在 table 中设置数据时，您将数据模型设置为 search.zone、search.location、search.date 等

首先您需要更正数据访问密钥。

其次，您从 http 请求中获取的数据是一个包含数组的对象。

所以你需要使用ng-repeat（或任何其他迭代逻辑）来遍历显示在table中的数据。

第三，sonvinrpm是一个对象，所以你需要做null或undefined检查

if ($scope.sonvinrpm == '') {
    $scope.errormessage = 'Data Not Found... Please Select Correct Date Range';
}

应替换为

if (!$scope.sonvinrpm) {
    $scope.errormessage = 'Data Not Found... Please Select Correct Date Range';
}

Answer 2

首先，我无法找到您在何处调用 $scope.getsonvindata 函数。您只是在定义函数，而不是在代码中的任何地方调用。像这样

$scope.getsonvindata();

其次是您错误地应用了过滤器。这是通过过滤器设置顺序的正确方法。添加范围

$scope.predicate = 'venue';
$scope.reverse = true;

然后添加到 ng-repeat orderBy:predicate:reverse

这是工作 link https://jsfiddle.net/U3pVM/27907/

angularjs 数据未显示在 table 中

angularjs data is not showing in table

javascript

html-table

asmx

angularjs