각도 UI 그리드에 데이터가 표시되지 않습니다.

ShopplingList 컨트롤러의 간단한 루프 메서드에서 모눈을 채우는 UI 모눈 및 각도를 사용하고 있습니다. 그리드는 열 머리글과 함께 표시되지만 데이터는 아니며 F12를 누르면 크롬에 오류가 없습니다. 내가 어디로 잘못 가고 있는지에 대한 도움 !!각도 UI 그리드에 데이터가 표시되지 않습니다.

내 HTML과 자바 스크립트

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() { 돌아 가기보기 ("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

은 ui-grid 구성에서 누락 한 가지가, 당신의 get 방법은 요청 개체를 수신하는 가정 : 기업의 field. 이 속성은 columnDefs 속성에서 설정되며 name 속성 (열 머리글)을 실제 엔터티 필드에 연결합니다.

이 시도 :

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

출처

2016-07-24 11:51:38 AranS

백만 Thx -이 효과가 있음 – mspelly

각도 UI 그리드에 데이터가 표시되지 않습니다.

답변

관련 문제