javascript - AngularJS implementing ui-grid -
i attempting use ui-grid along w/ angularjs first time. doing tutorial on nggrid... when looked reference files said ui-grid on them.... bit confused.
i have referenced following in aspx page:-
<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 gridview work looks this:-
<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 aspx body looks like:-
<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 of in place, empty grid following style, referenced through div class:-
.gridstyle { border: 1px solid rgb(212,212,212); width: 400px; height: 300px }
i must missing ... no idea though.
when check console on browser, gives me following error:- uncaught error: unknown provider: $rootscopeprovider <- $rootscope
edit:- created code in plunker , works on emulator not via visual studio 2013 on aspx page (it works via html page):-
you must inject 'ui.grid'
not 'nggrid'
, change implementation:
<div id="grid1" ui-grid="gridoptions" class="grid"></div>
check example: http://plnkr.co/edit/bq8avbvb7uxwbebnkoro?p=preview
Comments
Post a Comment