動態列表和Ng-Repeat

-1

我通過webapi controller將錶轉回到我的angurlarjscontroller。根據返回的方式，列標題是動態的。動態列表和Ng-Repeat

問題：如何使用ng-repeat和table來顯示它？

Web的API：

[System.Web.Http.HttpGet] 
     public IEnumerable<dynamic> GetPayrollSampleList(int payrollId) 
     { 
       int schoolId = Convert.ToInt32(UserDataPieces(2)); 
       int schoolBranchId = Convert.ToInt32(UserDataPieces(5)); 

       DataTable dt = new DataTable(); 
       dt = unitOfWork.FinanceRepository.GetPayrollSampleList(payrollId, schoolBranchId, schoolId); 

         foreach (DataRow row in dt.Rows) 
         { 
          ExpandoObject dynamicDto = new ExpandoObject(); 

          foreach (DataColumn column in dt.Columns) 
          { 
           ((IDictionary<String, Object>)dynamicDto).Add(column.ColumnName, row[column.ColumnName]); 
          } 

          yield return dynamicDto; 
         } 
     }

angularjs：

$scope.loadGrid = function (payrollId) { 
     dataService.getItems(baseAddress + '/GetPayrollSampleList', { payrollId: payrollId }) 
       .success(function (data) { 
        $scope.myData = data; 
      }) 
       .error(function() { 
        toastr.error("Error loading payroll"); 
      }); 
    };

UI：

enter image description here

來源

2015-07-03 uikrosoft

你先寫了代碼嗎？ – Vineet

@Vineet我已經將代碼寫入了angularjs。 – uikrosoft

數據的對象是什麼？你能舉一個例子嗎？ –

所以，你有$ scope.myData成功拉回了二維數組，第一行是標題？工作小提琴http://jsfiddle.net/joshuaohana/1nhcf4g6/1/

<table> 
    <tr ng-class='{header:$first}' ng-repeat="row in myData"> 
    <td ng-repeat="column in row"> 
     {{column}} 
    </td> 
    </tr> 
</table>

來源

2015-07-03 15:06:21

你如何給它添加標題？ – uikrosoft

@uikrosoft更新了答案並更新了jsfiddle鏈接;用ng-class不同地表示第一行 –

動態列表和Ng-Repeat

回答

相關問題