Angular 填充数据但显示没有可用数据答案

【问题标题】：Angular populates data but Showing no data availableAngular 填充数据但显示没有可用数据
【发布时间】：2018-10-13 18:08:07
【问题描述】：

我是 angularjs 新手，我正在尝试使用 ng-repeat

在网页上填充数据

<tr ng-repeat="d in dataList">
   <td> {{d.name}} </td>
   <td> {{d.email}} </td>
   <td> {{d.address}} </td>
   <td> {{d.phone}} </td>
</tr>

并使用jquery

angular.element(document).ready(function() {  
   dTable = $('#table')  
   dTable.DataTable();
});

数据填充得很好，并且表也被转换为数据表。但我得到的是这些行没有嵌入数据表中。

它打印数据，但也显示无可用数据，并显示 0 个条目

Look at the screenshot here

我们将不胜感激。

index.html

<!DOCTYPE html>
<html lang="en" ng-app="app" class="no-js">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/css/app.css">
<link rel="stylesheet" href="/css/utopiapk.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular-resource.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controller.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" ></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" ></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js" ></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js" ></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css">

<script src="/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="/css/datatables.bootstrap.css"> 


</head>

<body>

<div ng-view style="padding:2%">
 <table id="vendors" class="table table-striped table-bordered dtable" style="width:100%" > 
            <thead>
                <tr>
                    <th>Vendor Code</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Address</th>
                    <th>Phone</th>
                    <th></th>

                </tr>
            <thead>
            <tbody>
                <tr ng-show="vendors.length" ng-repeat="v in vendors"  >
                    <td>{{v.vendorCode}} </td>
                    <td>{{v.name}} </td>
                    <td>{{v.email}} </td>
                    <td>{{v.address}} </td>
                    <td>{{v.phone}} </td>
                    <td><i class="fas fa-edit"></i> </td>
                </tr>
            </tbody>
        </table>

</div>

<script type="text/javascript">
$(document).ready(function() {
    $('#vendors').DataTable();
 } );
</script>

</body>
</html>

这是我的 controller.js

app.controller('productsController', function($scope, $http) {
    $http({
        method : 'GET',
        url : 'getAll'
    })
    .then(function(response, status, headers, config) {
        $scope.vendors= response.data;
        $scope.headingTitle= "Vendor";
    })
    .catch(function(data, status) {
        console.error('Repos error', status, data);
    })
});

【问题讨论】：

你能发布你的完整的html代码吗？

标签： jquery html angularjs datatables

【解决方案1】：

使用ng-show="dataList.length"作为数据列表和

使用ng-show="!dataList.length" 作为消息 div。

例如。

<tr ng-show="dataList.length" ng-repeat="d in dataList">
   <td> {{d.name}} </td>
   <td> {{d.email}} </td>
   <td> {{d.address}} </td>
   <td> {{d.phone}} </td>
</tr>

【讨论】：

我已经添加了代码。请调查一下。抱歉耽搁了