在页面上不显示网格的角度UI-GRID

即使很多研究都无法找到一个可以帮助我在本地运行角度UI-GRID示例的好例子。在页面上不显示网格的角度UI-GRID

下面是HTML文件，该文件正在使用，简单的文件名为index.html：

<!doctype html> 
<html ng-app="app"> 

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script> 

    <script src="release/ui-bootstrap-tpls-0.12.1.min"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/> 
    <link rel="stylesheet" href="release/ui-grid-unstable.css"/> 
    <link rel="stylesheet" href="main.css"/> 
    <script src="release/ui-grid-unstable.js"></script> 

    <script src="app.js"></script> 
    </head> 
    <body> 
    <div ng-controller="MainCtrl"> 
     <div id="grid1" ui-grid="{ data: myData }" class="grid"></div> 
    </div> 
    </body> 
</html>

这里是你可以在为HTML相同的路径放置app.js。

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 
    }] 
    ,columnDefs: [field: 'firstName', displayName: 'First Name', width: '30%', maxWidth: 200, minWidth: 70], 
       [field: 'lastName', displayName: 'Last Name', width: '30%', maxWidth: 200, minWidth: 70]; 
}]);

的UI并网unstable.js和UI并网unstable.css从链接下载：

http://ui-grid.info/release/ui-grid-unstable.js 和 http://ui-grid.info/release/ui-grid-unstable.css

请请你帮我我只是花时间来运行这个。

我能够为我的需求运行ng-grid，但由于没有列和行调整功能，我不得不现在切换到ui-grid。

来源

2015-04-06 Suraj Sharma

我最近也开始学习AngularJs。如果你想使用AngularJs，那么你可以从这个链接得到一些帮助。 http://angular-ui.github.io/ng-grid/。在AngularJs上做R & D时，我发现这个链接。希望这可能会有所帮助。为了用户NG网你可以从这里https://github.com/angular-ui/ng-grid/tree/2.x

更新无论是git的结帐或下载的zip（或使用凉亭）`请参阅本http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview

<link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet"  href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
    <link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />`

是@suraj这是一个。

希望它也会帮助别人

来源

2015-04-06 09:19:10 Reena

其实我看着一切，按照规定我能够在NG-GRID我的代码运行，但我想要的是做在ui-grid中，它仍然不稳定但正在工作。 – 2015-04-06 10:00:01

看到这个http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview是否有帮助 – Reena 2015-04-06 10:17:18

非常感谢Reena。这有助于:) – 2015-04-09 01:56:14

错误你（在Chrome中如果）得到什么JavaScript控制台的网络选项卡和/或上的文件没有被加载？

我最好的猜测是你没有下载ui-grid发布文件，并将它们放到释放文件夹中作为release/ui-grid.js和release/ui-grid.css。但是你的index.html文件告诉你的浏览器这是它可以找到这些文件的地方。

一旦你解决了这个问题，你也会遇到字体问题，因为你还需要下载字体文件并在本地安装。确切的位置取决于你的构建脚本和其他一些东西，但一般来说，CSS会希望它们是字体/ xxxxx。

来源

2015-04-06 22:14:29 PaulL

由里纳提供的链接：http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview

有助于启动UI格。

如果没看错这些都是我错过了线：

<link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
<link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />

来源

2015-04-09 01:58:15

在页面上不显示网格的角度UI-GRID

回答

相关问题