[英]AngularJS implementing ui-grid
I am attempting to use the ui-grid along w/ AngularJS for the first time. 我正在尝试第一次在AngularJS中使用ui-grid。 I was initially doing a tutorial on ngGrid... but when I looked up the reference files they all said ui-grid on them.... so now I am a bit confused. 我最初在ngGrid上做一个教程...但是当我查找参考文件时,他们都对它们说了ui-grid ....所以现在我有些困惑。
I have referenced the following in my aspx page:- 我在aspx页面中引用了以下内容:-
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://code.angularjs.org/1.0.5/angular.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-1.12.0.min.js"></script>
<script src="Scripts/ui-grid.min.js"></script>
<link href="Content/ui-grid.min.css" rel="stylesheet" />
My Javascript to get the GridView to work looks like this:- 使GridView正常工作的我的Java脚本如下:-
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="secondaryContent">
<script type="text/javascript">
var app = angular.module('', ['ngGrid']);
app.controller('UserController', function ($scope) {
$scope.myData = [{ name: "xxxx", age: 50 },
{ name: "yyyy", age: 43 },
{ name: "zzzz", age: 27 },
{ name: "eeee", age: 29 },
{ name: "ffff", age: 34 }];
$scope.gridOptions = {
data: 'myData',
showGroupPanel: true,
jqueryUIDraggable: true
};
});
</script>
</asp:Content>
and finally my aspx body looks like:- 最后我的aspx身体看起来像:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<h1>My AngularJS Application</h1>
<div class="row">
<div style="margin-top: 40px"></div>
<div data-ng-app="" data-ng-controller="UserController">
<b>Employee List</b><br />
<br />
<div class="gridStyle" data-ng-grid="gridOptions"></div>
With all of this in place, I get an empty grid with the following style, referenced through my div class:- 完成所有这些操作后,我得到了一个具有以下样式的空网格,可通过div类进行引用:-
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px
}
I must be missing something ... no idea what though. 我一定想念一些东西……不知道该怎么办。
When I check the console on my browser, it gives me the following error:- Uncaught Error: Unknown provider: $rootScopeProvider <- $rootScope 当我在浏览器上检查控制台时,它给我以下错误:- 未捕获的错误:未知提供程序:$ rootScopeProvider <-$ rootScope
Edit:- I created my code in plunker and it works on the emulator but not via my Visual Studio 2013 on the aspx page (it works via an html page):- 编辑:-我在plunker中创建了我的代码,它可以在模拟器上工作,但不能通过aspx页面上的Visual Studio 2013(它可以通过html页面工作):-
http://plnkr.co/edit/L3n5CETMtlTQagNm6axK?p=preview http://plnkr.co/edit/L3n5CETMtlTQagNm6axK?p=preview
You must inject 'ui.grid'
not 'ngGrid'
and change implementation: 您必须注入'ui.grid'
而不是'ngGrid'
并更改实现:
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
Check this example: http://plnkr.co/edit/Bq8AVBVb7UxwBeBNKoRO?p=preview 检查此示例: http : //plnkr.co/edit/Bq8AVBVb7UxwBeBNKoRO?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.