Angular js网格不起作用答案

【问题标题】：Angular js Grid is not workingAngular js网格不起作用
【发布时间】：2017-08-23 11:05:45
【问题描述】：

下面是我的代码

 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head runat="server">
    <title></title>
    <script src="js/jquery-2.1.3.min.js"></script>        
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" rel="stylesheet" />
    <script src="js/bootstrap.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('MyCtrl1', function ($scope) {
            $scope.today = new Date();
        });
        app.controller('MyCtrl2', 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' };
        });
    </script>
</head> 
<body>
    <form id="form1" runat="server">
        <div ng-controller="MyCtrl1">
            <div class="jumbotron">
            </div>
            <div class="container container-fluid">
                <div class="row">
                    <div class="col-lg-offset-2 col-lg-4">
                        <div class="table table-hover" ng-grid="gridOptions"></div>
                    </div>
                </div>
                <p class="text-right">{{ today | date }}</p>
            </div>
        </div>
        <div ng-controller="MyCtrl2">
            <div class="table table-hover" ng-grid="gridOptions"></div>
        </div>
    </form>
</body>
</html>

我是 Angular js 新手，参考来自 http://angular-ui.github.io/ui-grid/ 的示例

这段代码应该显示一个网格（使用 ng-grid）但它不是

这个例子有什么问题？？

【问题讨论】：

试试$scope.gridOptions = { data: $scope.myData};
试过但不起作用

标签： javascript asp.net angularjs angular-ui-grid

【解决方案1】：

您实际上并没有使用此行设置数据。您正在将 $scope.gridOptions.data 的值设置为字符串文字“myData”。

$scope.gridOptions = { data: 'myData' };

你需要做的是（最少）：

$scope.gridOptions = { data: $scope.myData };

由于您不需要直接使用范围上的数据，因此您可以这样做：

var 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.gridOptions = {
    data: [
           { name: "Moroni", age: 50 },
           { name: "Tiancum", age: 43 },
           { name: "Jacob", age: 27 },
           { name: "Nephi", age: 29 },
           { name: "Enos", age: 34 }
    ]
};

在您的模块声明中，您还需要更改为这个。这告诉你的模块它将使用这个库。没有它，您将不会加载用于创建网格的ui-grid 指令。

var app = angular.module('myApp', ['ui.grid']);

现在，说了这么多，我不确定您在这里使用引导类。通常，网格有自己的 CSS 找到 here。如果您的网格显示效果不佳或根本没有显示（不确定会发生什么），那么您应该使用该样式表并将您的 HTML 设置为此。无论如何，您需要将ng-grid 更改为ui-grid。 ng-grid 来自更旧的版本。

<div class="grid" ui-grid="gridOptions"></div>

【讨论】：

将 'myData' 更改为 myData 并注入 ['ui.grid'] ，但仍然没有结果
您在控制台中看到了什么？
它是 ui-grid="gridOptions"，谢谢，它现在显示，一个问题 - 我如何在应用程序中注入多个依赖项
很好，没问题！对于多个部门，只需 angular.module('myApp', ['ui.grid','another.dependency']);
另外，为了好奇，如果不将类设置为“网格”并且只使用 boostrap 类，它是否正确显示？