ng-grid不显示任何数据

时间:2015-12-17 07:01:13

标签: angularjs ng-grid

我一直试图在3小时内在ng-grid中显示json数据但是无法做到。我按照ng -grid的入门指南中给出的说明进行了跟踪。但是无法显示数据在网格中。

在我的UserEdit.aspx页面中,我的HTML代码如下:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserEdit.aspx.cs" Inherits="SampleWebApp.UserEdit" %>

        <!DOCTYPE html>
        <html >
        <head runat="server">
            <script src="/Scripts/angular.js"></script>
            <script src="/Scripts/jquery-1.9.1.js"></script>
            <script src="/Scripts/ng-grid-2.0.14.min.js"></script>
            <script src="/Scripts/bootstrap.js" type="text/javascript"></script>
            <script src="/Scripts/Control.js" type="text/javascript"></script>
            <link rel="Stylesheet" type="text/css" href="/Styles/ng-grid.min.css" />
            <link rel="Stylesheet" type="text/css" href="/Styles/Style.css"/>
            <title></title>
        </head>
        <body>
            <form id="form1" runat="server" novalidate>
            <div ng-app="myApp">
                <table style="width: 100%; height: 100%">
                    <tr style="text-align: center; vertical-align: middle;width:100%">
                        <td style="width:50%;text-align:left">
                            First Name:
                            <input type="text" name="firstname" ng-model="FirstName"/>
                        </td>
                        <td style="width:50%;text-align:left">
                            Last Name:
                            <input type="text" name="lastname" ng-model="LastName"/>
                        </td>
                    </tr>
                </table>

            </div>
           <div ng-controller="MyCtrl">
            <div class="gridStyle" ng-grid="gridOptions"></div>
            </div>
            </form>
        </body>
        </html>

在我的模块的Control.js文件中,我已经注入了ngGrid的依赖项,并在我的控制器MyCtrl中初始化了gridoptions变量。我的js代码如下

在我的Control.js中,它如下:

var app = angular.module("myApp", ["ngGrid"]);

app.controller('MyCtrl', function ($scope) {
    $scope.myData = [{ name: "Moroni", age: 50 },
                 { name: "Tiancum", age: 43 },
                 { name: "Jacob", age: 27 },
                 { name: "Nephi", age: 29 },
                 { name: "Enos", age: 34}];
    $scope.gridOptions = {
     data:'myData'
     };
 $scope.$apply();
}); 

仅供参考,控制台中没有出现任何错误。当我查看http://angular-ui.github.io/ui-grid/中给出的示例时,如果我在plunker中查看代码,则会发生同样的事情(即我看不到任何网格)。

感谢任何帮助!

1 个答案:

答案 0 :(得分:5)

您在MyCtrl

之外使用ng-app

它应该在它的模块内部。

试试这个

<div ng-app="myApp">
 <div ng-controller="MyCtrl">
 </div>
</div>

N:B:你不需要$scope.$apply();