html - Using ng-grid in partial page -
is there example of using ng-grid in partial pages. whenever try use, error pops typeerror: cannot set property 'mydata' of undefined.
my app.js
'use strict'; // declare app level module depends on filters, , services angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives', 'myapp.controllers', 'nggrid']). config(['$routeprovider', function($routeprovider) { $routeprovider.when('/view1', {templateurl: 'partials/partial1.html', controller: 'myctrl1'}); $routeprovider.when('/view2', {templateurl: 'partials/partial2.html', controller: 'myctrl2'}); $routeprovider.otherwise({redirectto: '/view1'}); }]); controller.js
'use strict'; /* controllers */ angular.module('myapp.controllers', ['nggrid']). controller('myctrl1', [function ($scope) { $scope.mydata = [{name: "moroni", age: 50}, {name: "tiancum", age: 43}, {name: "jacob", age: 27}, {name: "nephi", age: 29}, { name: "enos", age: 34 },]; $scope.gridoptions = { data: 'mydata', columndefs: [{ field: 'name', displayname: 'name' }, { field: 'age', displayname: 'age', celltemplate: '<div ng-class="{green: row.getproperty(col.field) > 30}"><div class="ngcelltext">{{row.getproperty(col.field)}}</div></div>' }], showgrouppanel: true }; }]) .controller('myctrl2', [function() { }]); //myctrl1.$inject = ['$scope']; partial1.html
<p>this partial view 1.</p> <div class="gridstyle" ng-grid="gridoptions"></div> <div style="clear:both"/> <p>{{ mydata | json }}</p> partial2.html
<p>this partial view 2.</p> <p> showing of 'interpolate' filter: {{ 'current version v%version%.' | interpolate }} </p> and index.html
<!doctype html> <html xmlns:ng="http://angularjs.org" id="ng-app" lang="en" ng-app="myapp"> <head> <meta charset="utf-8"> <title>my angularjs app</title> <link rel="stylesheet" href="css/app.css"/> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/ng-grid.css"> <link rel="stylesheet" href="css/style.css"> <!-- in production use: <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> --> <script src="js/jquery-1.9.1.min.js"></script> <script src="lib/angular/angular.js"></script> <script src="js/ng-grid-2.0.5.min.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/filters.js"></script> <script src="js/directives.js"></script> <script src="js/controllers.js"></script> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div ng-view></div> <div>angular seed app: v<span app-version></span></div> </body> </html> can please say, why 'mydata' unavailable in partial1.html?
thanks in advance.
it late, code right here {name: "enos", age: 34 },]; don't need coma. should read: {name: "enos", age: 34 }];
Comments
Post a Comment