2015-04-06 77 views
1

即使很多研究都無法找到一個可以幫助我在本地運行角度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.jshttp://ui-grid.info/release/ui-grid-unstable.css

請請你幫我我只是花時間來運行這個。

我能夠爲我的需求運行ng-grid,但由於沒有列和行調整功能,我不得不現在切換到ui-grid。

回答

1

我最近也開始學習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這是一個。

希望它也會幫助別人

+0

其實我看着一切,按照規定我能夠在NG-GRID我的代碼運行,但我想要的是做在ui-grid中,它仍然不穩定但正在工作。 – 2015-04-06 10:00:01

+0

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

+0

非常感謝Reena。這有助於:) – 2015-04-09 01:56:14

0

錯誤你(在Chrome中如果)得到什麼JavaScript控制檯的網絡選項卡和/或上的文件沒有被加載?

我最好的猜測是你沒有下載ui-grid發佈文件,並將它們放到釋放文件夾中作爲release/ui-grid.js和release/ui-grid.css。但是你的index.html文件告訴你的瀏覽器這是它可以找到這些文件的地方。

一旦你解決了這個問題,你也會遇到字體問題,因爲你還需要下載字體文件並在本地安裝。確切的位置取決於你的構建腳本和其他一些東西,但一般來說,CSS會希望它們是字體/ xxxxx。

0

由里納提供的鏈接: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" />