angularjs显示表中数组的数据

Question

我想显示数组中的数据在表中。

这是我有：

controllers.js：

app.controller('DriverController', ['$scope', '$http', 
    function ($scope, $http) { 

     //Defining the $http service for getting the sources 
     $http({ 
      method: 'GET', 
      url: '/Driver/GetDrivers' 
     }). 
     success(function (data) { 
      $scope.drivers = data; 
     }); 
    }]); 

数据我越来越：

HTML标记：

<table ng-controller="DriverController"> 
        <thead> 
        <th> 
         Name 
        </th> 

        </thead> 
        <tbody ng-repeat="driver in Drivers"> 
         <tr> 
          <td> 
           {{driver.FirstName}} 
          </td> 

         </tr> 

        </tbody> 
       </table> 

最终结果：

任何人都可以帮我解决这个问题？

感谢

更新：

我想这是很好，只是为了看看角度是否正确挂接：

app.controller('DriverController', ['$scope', '$http', 
    function ($scope, $http) { 

     //Defining the $http service for getting the sources 
     $http({ 
      method: 'GET', 
      url: '/Driver/GetDrivers' 
     }). 
     success(function (data) { 
      $scope.Drivers = data; 
      $scope.Test = "testt"; 
      console.log('data retrieved'); 
      console.log($scope.Drivers); 
     }); 

    }]); 

我更新的观点：

@using ui.ViewModels 
@model DriversViewModel 

@{ 
    ViewBag.Title = "Drivers List"; 
} 


@using (Html.BeginForm()) 
{ 
    <div data-ng-app="app"> 
     <section class="panel"> 
      <header class="panel-heading"> 
       <div class="panel-actions"> 
        <a href="#" class="panel-action panel-action-toggle" data-panel-toggle></a> 
        <a href="#" class="panel-action panel-action-dismiss" data-panel-dismiss></a> 
       </div> 

       <h2 class="panel-title">Drivers List</h2> 
      </header> 
      <div class="panel-body" data-ng-controller="DriverController"> 
       <p>{{Test}}</p> 
       <table class="table table-no-more table-bordered table-striped mb-none"> 
        <thead> 
         <tr> 
          <th>Id</th> 
          <th class="hidden-xs hidden-sm">First Name</th> 
          <th class="text-right hidden-xs hidden-sm">Middle Name</th> 
          <th class="text-right">Last Name</th> 
          <th class="text-right">Party</th> 
         </tr> 
        </thead> 
        <tbody> 
         @foreach (var p in Model.Drivers) 
         { 
          <tr> 
           <td data-title="Code">@p.Id</td> 
           <td data-title="Company" class="hidden-xs hidden-sm">@p.FirstName</td> 
           <td data-title="Change" class="text-right hidden-xs hidden-sm">@p.MiddleName</td> 
           <td data-title="Price" class="text-right">@p.LastName</td> 
           <td data-title="Change %" class="text-right">@p.Party.Name</td> 
          </tr> 

         } 

        </tbody> 
       </table> 

       <table> 
        <thead> 
        <th> 
         Name 
        </th> 

        </thead> 
        <tbody> 
         <tr ng-repeat="driver in drivers"> 
          <td>{{driver.firstName}}</td> 
          <td>{{driver.lastName}}</td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 

     </section> 
    </div> 

} 

我也试过一个简单的东西，比如<p>{{driver.Test}}</p>但是你可以看到没有任何价值被显示。

所以我认为角度和mvc应用程序之间有一些断开，你们认为我做错了什么？

Answer 1

您可以尝试在tr标签上添加ng-repeat而不在tbody标签上。

编辑： 也许你忘了把NG-应用程式的表格之外，这个小提琴作品

https://jsfiddle.net/xy2y1b9y/

<div ng-app="app"> 
    <script> 
     angular.module('app', []) 
      .controller('DriverController', function($scope) { 
      $scope.Drivers = [{ 
       FirstName: "first" 
      }, { 
       FirstName: 'second' 
      }] 
     }) 
    </script> 
    <table ng-controller="DriverController"> 
     <thead> 
      <th>Name</th> 
     </thead> 
     <tbody ng-repeat="driver in Drivers"> 
      <tr> 
       <td>{{driver.FirstName}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

（虽然NG重复的位置应该是在TR上的标签）

Answer 2

把ng-repeat放在表格内tr：

<table ng-controller="DriverController"> 
    <thead> 
     <tr> 
      <th>First Name</th> 
      <th>Last Name</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="driver in drivers"> 
      <td>{{driver.firstName}}</td> 
      <td>{{driver.lastName}}</td> 
     </tr> 
    </tbody> 
</table>