angularjs ui.grid无法正常使用

在使用angularjs的ui.grid的时候 从官网(http://ui-grid.info/docs/#/tutorial/101_intro)copy来的代码却不能正常使用,变成:
图片描述

然后是我的代码:

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://cdn.bootcss.com/angular.js/1.4.0/angular.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.4.0/angular-touch.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.4.0/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://cdn.bootcss.com/angular-ui-grid/3.1.0/ui-grid.css"></script>
    <script src="http://cdn.bootcss.com/angular-ui-grid/3.1.0/ui-grid.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
    </div>
  </body>
  <script>
  var app = angular.module('app', ['ngTouch', 'ui.grid']);
 
app.controller('MainCtrl', ['$scope', function ($scope) {
 
  $scope.myData = [
    {
        "firstName": "Cox",
        "lastName": "Carney",
        "company": "Enormo",
        "employed": true
    },
    {
        "firstName": "Lorraine",
        "lastName": "Wise",
        "company": "Comveyer",
        "employed": false
    },
    {
        "firstName": "Nancy",
        "lastName": "Waters",
        "company": "Fuelton",
        "employed": false
    }
];
}]);
  </script>
</html>

我想知道到底是哪里出了问题?

阅读 4.5k
1 个回答
<script src="http://cdn.bootcss.com/angular-ui-grid/3.1.0/ui-grid.css"></script>

修改为:

<link rel="styleSheet" href="http://cdn.bootcss.com/angular-ui-grid/3.1.0/ui-grid.css"/>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进