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>