Angular UI Grid不显示数据答案

【问题标题】：Angular UI Grid not displaying dataAngular UI Grid不显示数据
【发布时间】：2016-07-24 10:58:08
【问题描述】：

我正在学习 Angular 并使用 UI 网格，我通过 ShopplingList 控制器中的简单循环方法填充网格。网格与列标题一起显示，但数据不是，当我按 F12 时，我在 chrome 中没有错误。任何关于我哪里出错的帮助！

我的 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 : 控制器 { // // 获取：/购物清单/ 公共 ActionResult 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);
    }
}

【问题讨论】：

我有一个假设，但首先...你能调试get 函数并确保你得到正确的响应吗？（如果项目列表）

标签： angularjs model-view-controller

【解决方案1】：

假设您的get 方法接收到请求的实体，那么您的ui-grid 配置中缺少一件事：实体的field。这是在columnDefs 属性中设置的，负责将name 属性（将是列标题）连接到实际的实体字段。

试试这个：

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

【讨论】：