gridOption沒有從控制器接收我的數據

Question

我是angularjs的新手，我試圖用數據庫中的數據填充ui網格。我試圖尋找其他問題，但我沒有發現類似於我的在線問題。該表顯示得很好，但我的數據沒有填充。我在Source的Chrome中的開發人員工具中看到過它，它似乎已被正確地格式化爲Json對象，但我不能讓它在表中顯示任何東西。我知道這可能是我正在做的小事或不做任何幫助，將不勝感激。

下面是我的控制器JS

var app = angular.module('skill', ["ui.grid", 
           "ui.grid.edit", 
           "ui.grid.selection", 
           "ui.grid.pagination", 
           "ui.grid.exporter", 
           "ui.grid.cellNav"]); 
app.controller('SkillEntryController', function ($scope, $http, $interval, uiGridConstants, SkillService) { 
$scope.data = []; 
SkillService.GetSkills().then(function (d) { 
    $scope.data = d.data; 
}, function() { 
    alert('Failed'); 
}); 
$scope.columns = [ 
     { name: "SkillName", displayName: "Skill Code", minWidth: 150, width: "33%" }, 
     { name: "Category", minWidth: 150, width: "33%" }, 
     { name: "Description", minWidth: 150, width: "33%" } 
]; 
$scope.gridOptions = { 
    enableSorting: true, 
    enableRowSelection: true, 
    enableCellEditOnFocus: true, 
    exporterHeaderFilterUseName: true, 
    treeRowHeaderAlwaysVisible: false, 
    paginationPageSizes: [25, 50, 75], 
    paginationPageSize: 25, 
    columnDefs: $scope.columns, 
    data: $scope.data, 
    onRegisterApi: function (gridApi) { 
     $scope.gridApi = gridApi; 
    } 
}; 
}).factory('SkillService', function ($http) { 
var fac = {} 
fac.GetSkills = function() { 
    return $http.get('/Skills/GetSkills'); 
} 
return fac; 
}); 

這裏是我的工廠方法：

public JsonResult GetSkills() 
    { 
     List<Skill> c = new List<Skill>(); 
     return new JsonResult { Data = c.Select(x => new { x.Category, x.Description, x.SkillCodeID, x.SkillName }), JsonRequestBehavior = JsonRequestBehavior.AllowGet }; 
    } 

這裏是我的CSHTML文件：

@model IEnumerable<SkillResourceCenterApp.Models.Skill> 
@using Newtonsoft.Json; 
@{ 
    ViewData["Title"] = "Add Skill"; 
} 
@section scripts{ 
    <link href="~/Content/ui-grid.css" rel="stylesheet" /> 
    <script src="~/Scripts/angular.js"></script> 
    <script src="~/Scripts/ui-grid.js"></script> 
    <script src="~/Scripts/Controller/skill-entry-controller.js"></script> 

} 

<style> 
    .ui-grid-cell.cell-center { 
     text-align: center; 
    } 

    .ui-grid-cell.cell-right { 
     text-align: right; 
    } 
    .no-rows { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     width: 100%; 
     background: rgba(0, 0, 0, 0.4); 
    } 

    .no-rows .msg { 
     opacity: 1; 
     position: absolute; 
     top: 30%; 
     left: 33%; 
     width: 30%; 
     height: 25%; 
     line-height: 200%; 
     background-color: #eee; 
     border-radius: 4px; 
     border: 1px solid #555; 
     text-align: center; 
     font-size: 24px; 
     display: table; 
    } 

    .no-rows .msg span { 
     display: table-cell; 
     vertical-align: middle; 
    } 


</style> 

<h3>@ViewData["Title"]</h3> 

<p> 
    @Html.ActionLink("Create New", "Create") 
</p> 


<div class="container-fluid" ng-app="skill" ng-controller="SkillEntryController"> 

    <div class="row"> 
     <button type="button" ng-click="addNewRow()" class="btn btn-default col-sm-3 col-md-2"> 
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Row 
     </button> 
     <button type="button" ng-click="deleteSelected()" class="btn btn-default col-sm-3 col-md-2"> 
      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete Selected 
     </button> 
     <button type="button" ng-click="exportToCSV()" class="btn btn-default col-sm-3 col-md-2"> 
      <span class="glyphicon glyphicon-download" aria-hidden="true"></span> Export to Excel 
     </button> 
     <button type="button" ng-click="save()" class="btn btn-primary col-md-offset-4 pull-right col-sm-2"> 
      Save 
     </button> 
    </div> 
    <div class="row"> 
     <div class="grid" ui-grid="gridOptions" 
      ui-grid-pagination 
      ui-grid-selection 
      ui-grid-edit 
      ui-grid-exporter 
      ui-grid-cellNav 
      style="height: 500px;"> 
      <div class="no-rows" ng-show="!gridOptions.data.length"> 
       <div class="msg"> 
        <span>No Results</span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

你錯過了field定義在columnDefs。看看https://github.com/angular-ui/ui-grid/wiki/Defining-columns

var columnDefs: [{ 
    field: 'foo', 
    displayName: 'my foo', 
    visible: true, 
    maxWidth: 90, 
    enableColumnResizing: false, 
    cellTemplate: "<div>{{row.entity.foo}}</div>" 
}];