Question

我是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);
    })
});

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

Angular填充数据但不显示可用数据

1 个答案: