简体   繁体   中英

angularjs data is not showing in table

I am creating a web app in which I am using angularjs for SQL connectivity.

I have two users ( admin , Regional Partner Manager ) data of admin is showing properly on my table but data of Regional Partner manager Is Not showing.

Here is my js file:

$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 = '';
                }
            });

My 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>

and now the data I am getting from web service for my Regional Partner Manager:

{"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"}]}

the data is coming in my webservice, what is wrong here?

NOTE: data of admin is printing on my table but not of regional partner manager

In the .then(function () You have set

$scope.sonvinrpm = response.data.procompanysonVin;

But while setting data in the table you have set data model as search.zone , search.location , search.date etc.

Firstly you need to correct the key for data access.

Secondly the data which you are getting from the http request is an object which contains array.

So you need to use ng-repeat (or any other iterating logic) to traverse the data for displaying in the table.

Thirdly, sonvinrpm is an object, So you need to do null or undefined check

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

should be replaced with

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

First thing is i was not able to find where are you calling $scope.getsonvindata function. You are just defining function but not calling anywhere in the code. like this

$scope.getsonvindata();

Second is you have applied filters wrongly. Here is the proper way to set order by filter. add scope

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

then add to the ng-repeat orderBy:predicate:reverse

Here is the working link https://jsfiddle.net/U3pVM/27907/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM