Angular UI Grid不顯示數據

我正在學習Angular，並使用UI網格在我從ShopplebleList控制器中的簡單循環方法填充網格的位置。網格與列標題一起顯示，但數據不顯示，並且當我點擊F12時，我在chrome中沒有錯誤。任何幫助，我去哪裏錯了！Angular UI Grid不顯示數據

我的HTML和Javascript

var app = angular.module('app', ['ui.grid']); 
 

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

 
    $scope.gridOptions1 = {}; 
 

 
    $scope.gridOptions1.columnDefs = [{ 
 
     name: 'ID' 
 
    }, { 
 
     name: 'Shopping Item' 
 
    }]; 
 

 
    $http.get("/ShoppingList/getShoppingItems/") 
 
     .success(function(data) { 
 
     $scope.gridOptions1.data = data; 
 
     }).error(function(error) { 
 
     console.log(error); 
 
     }); 
 

 
    } 
 
]);

body {} .grid { 
 
    width: 1500px; 
 
    height: 450px; 
 
}

<!DOCTYPE html> 
 

 
<html ng-app="app"> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width" charset="UTF-8" /> 
 
    <title>ShoppingList</title> 
 
</head> 
 
<script src="~/Scripts/angular.min.js"></script> 
 
<script src="~/Scripts/ui-grid.min.js"></script> 
 
<script src="~/Scripts/Irlca/ShoppingList.js"></script> 
 
<link href="~/Content/ui-grid.css" rel="stylesheet" type="text/css" /> 
 
<link href="~/Content/main.css" rel="stylesheet" type="text/css" /> 
 

 
<body> 
 
    <div ng-controller="MainCtrl"> 
 
    <div id="grid1" ui-grid="gridOptions1" class="grid"></div> 
 
    </div> 
 
</body> 
 

 
</html>

我的模型

public class ShoppingListModel 
{ 
    public int id { get; set; } 
    public string shoppingItem { get; set; } 
}

我的控制器公共類ShoppingListController：控制器 {// // GET：/ ShoppingList/ public ActionResult ShoppingList（） { return View（「ShoppingList」）; }

public ActionResult getShoppingItems() 
    { 
     List<ShoppingListModel> lstRes = new List<ShoppingListModel>(); 

     for (int i = 0; i < 10; i++) 
     { 
      ShoppingListModel tsk = new ShoppingListModel(); 
      tsk.id = i * 10; 
      tsk.shoppingItem = "Milk" + i.ToString(); 
      lstRes.Add(tsk); 
     } 

     return Json(lstRes, JsonRequestBehavior.AllowGet); 
    } 
}

來源

2016-07-24 mspelly

我有一個假設，但首先，你可以調試'GET'功能，並確保你得到正確的迴應？（一個列表如果項目） – AranS

假設你get方法接收請求的實體，有一件事你ui-grid配置丟失：實體的field。這是在columnDefs屬性中設置的，並且負責將name屬性（它將成爲列標題）連接到實際實體字段。

試試這個：

$scope.gridOptions1.columnDefs = [{ 
     name: 'ID', 
     field: 'id' 
    }, { 
     name: 'Shopping Item', 
     field: 'shoppingItem' 
    }];

來源

2016-07-24 11:51:38 AranS

Thx一百萬 - 這工作 – mspelly

Angular UI Grid不顯示數據

回答

相關問題