Angular js 网格不工作

Question

下面是我的代码

 <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）但它不是

这个例子有什么问题吗？？

Answer 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']);

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

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

Angular js 网格不工作

Angular js Grid is not working

javascript

asp.net

angularjs

angular-ui-grid