Не показывает <tbody>в html

Question

Я хотел бы создать таблицу с angularjs на index.html.Затем показывает index.html и все в порядке, но <tbody ng-init="getAll()" - не показывает ...

Я ставлю index.html:

<table class="table table-hover">
            <tr>
                <th>ID</th>
                <th>Employee Name</th>
                <th>Age</th>
                <th>Department</th>
                <th></th>
                <th></th>
            </tr>
            <tbody ng-init="getAll()">
                <tr ng-repeat="d in employees">
                <td>{{d.id}}</td>
                <td>{{d.name}}</td>
                <td>{{d.designation}}</td>
                <td>{{d.expertise}}</td>
                <td>
                    <button class="btn btn-warning" ng-click="editInfo(d.id)" title="Edit"><span class="glyphicon glyphicon-edit"></span></button>
                </td>
                <td>
                    <button class="btn btn-danger" ng-click="deleteInfo(d.id)" title="Delete"><span class="glyphicon glyphicon-trash"></span></button>
                </td>
        </tr>
    </tbody>
            </table>

app.js:

$scope.getAll = function() {

    $http.get('employees').then(function(response, status, header, config){
        $scope.employees = response.data;
    });
}

мое веб-приложение:

Как мне решить эту проблему?

Answer 1

Убедитесь, что вы получаете данные от $http вызова.Ваш угловой код правильный и работает нормально для меня.

Также вы можете добавить текст, когда нет данных в $scope.employees

Попробуйте это:

angular.module("myapp", [])
  .controller("mycontroller", function($scope, $timeout, $http) {
    $scope.employees = [];

    $timeout(function() {
      $scope.employees = [{
          id: 1,
          name: 'Aagam',
          designation: 'Developer',
          expertise: 'Java Script'
        },
        {
          id: 2,
          name: 'Akshay',
          designation: 'Developer',
          expertise: 'python'
        }
      ];
    }, 3000);

    /*$http.get('employees').then(function(response, status, header, config) {
      $scope.employees = response.data;
    });*/
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="mycontroller">
  <div ng-hide="employees && employees.length">
    No-Data Available
  </div>
  <table class="table table-hover" ng-show="employees && employees.length">
    <tr>
      <th>ID</th>
      <th>Employee Name</th>
      <th>Age</th>
      <th>Department</th>
      <th></th>
      <th></th>
    </tr>
    <tbody ng-init="getAll()">
      <tr ng-repeat="d in employees">
        <td>{{d.id}}</td>
        <td>{{d.name}}</td>
        <td>{{d.designation}}</td>
        <td>{{d.expertise}}</td>
        <td>
          <button class="btn btn-warning" ng-click="editInfo(d.id)" title="Edit"><span class="glyphicon glyphicon-edit"></span></button>
        </td>
        <td>
          <button class="btn btn-danger" ng-click="deleteInfo(d.id)" title="Delete"><span class="glyphicon glyphicon-trash"></span></button>
        </td>
      </tr>
    </tbody>
  </table>
  <div>