Question

我正在学习Angular并使用UI网格，我从ShopplingList控制器中的一个简单循环方法填充网格。网格显示时带有列标题，但数据不是，当我点击F12时，我的chrome没有错误。对我出错的地方有任何帮助!!

我的HTML和Javascript

＆＃13;

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);
      });

  }
]);

＆＃13;

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

＆＃13;

<!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>

＆＃13;

我的模特

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

我的控制器公共类ShoppingListController：Controller { // // GET：/ ShoppingList / public ActionResult ShoppingList（） { return View（＆＃34; ShoppingList＆＃34;）; }

    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);
    }
}

Answer 1

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

试试这个：

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

Angular UI Grid不显示数据

1 个答案: