@@ -48,19 +48,19 @@ Steps:
4848 </pre>
4949 </li>
5050 <li>
51- Add an array of data to a property on your $scope
51+ Add an array of data to a property on your controller
5252 <pre>
53- $scope .myData = [
53+ this .myData = [
5454 {
5555 "firstName": "Cox",
5656 "lastName": "Carney"...
5757 </pre>
5858 </li>
5959 <li>
60- Use the ui-grid directive and specify a json object with a data property referencing your $scope .myData property.
60+ Use the ui-grid directive and specify a json object with a data property referencing your $ctrl .myData property.
6161 <pre>
62- <div ng-controller="MainCtrl">
63- <div ui-grid="{ data: myData }" class="myGrid"></div>
62+ <div ng-controller="MainCtrl as $ctrl ">
63+ <div ui-grid="{ data: $ctrl. myData }" class="myGrid"></div>
6464 </div>
6565 </pre>
6666
@@ -71,35 +71,35 @@ Steps:
7171@example
7272<example module="app">
7373 <file name="app.js">
74- var app = angular.module('app', ['ngTouch', 'ui.grid']);
74+ angular.module('app', ['ngTouch', 'ui.grid'])
75+ .controller('MainCtrl', MainCtrl);
7576
76- app.controller('MainCtrl', ['$scope', function ($scope) {
77-
78- $scope.myData = [
77+ function MainCtrl() {
78+ this.myData = [
7979 {
80- " firstName" : "Cox",
81- " lastName" : "Carney",
82- " company" : "Enormo",
83- " employed" : true
80+ firstName: "Cox",
81+ lastName: "Carney",
82+ company: "Enormo",
83+ employed: true
8484 },
8585 {
86- " firstName" : "Lorraine",
87- " lastName" : "Wise",
88- " company" : "Comveyer",
89- " employed" : false
86+ firstName: "Lorraine",
87+ lastName: "Wise",
88+ company: "Comveyer",
89+ employed: false
9090 },
9191 {
92- " firstName" : "Nancy",
93- " lastName" : "Waters",
94- " company" : "Fuelton",
95- " employed" : false
92+ firstName: "Nancy",
93+ lastName: "Waters",
94+ company: "Fuelton",
95+ employed: false
9696 }
97- ];
98- }]);
97+ ];
98+ }
9999 </file>
100100 <file name="index.html">
101- <div ng-controller="MainCtrl">
102- <div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
101+ <div ng-controller="MainCtrl as $ctrl ">
102+ <div id="grid1" ui-grid="{ data: $ctrl. myData }" class="grid"></div>
103103 </div>
104104 </file>
105105 <file name="main.css">
@@ -110,26 +110,27 @@ Steps:
110110 </file>
111111
112112 <file name="scenario.js">
113- var GridObjectTest = require('../../test/e2e/gridObjectTestUtils.spec.js');
114- var grid1 = new GridObjectTest('grid1');
113+ var GridObjectTest = require('../../test/e2e/gridObjectTestUtils.spec.js'),
114+ grid1 = new GridObjectTest('grid1');
115+
115116 describe('101 tutorial', function() {
116- it('grid should have three visible rows', function () {
117+ it('grid should have three visible rows', function() {
117118 grid1.expectRowCount( 3 );
118119 });
119120
120- it('header values should be as expected', function () {
121+ it('header values should be as expected', function() {
121122 grid1.expectHeaderColumns( ['First Name', 'Last Name', 'Company', 'Employed'] );
122123 });
123124
124- it('first row cell values should be as expected', function () {
125+ it('first row cell values should be as expected', function() {
125126 // checking individual cells usually gives a better stack trace when there are errors
126127 grid1.expectCellValueMatch( 0, 0, 'Cox' );
127128 grid1.expectCellValueMatch( 0, 1, 'Carney' );
128129 grid1.expectCellValueMatch( 0, 2, 'Enormo' );
129130 grid1.expectCellValueMatch( 0, 3, 'true' );
130131 });
131132
132- it('next two row cell values should be as expected', function () {
133+ it('next two row cell values should be as expected', function() {
133134 // checking in bulk is convenient to write, but can be less informative with errors
134135 grid1.expectRowValuesMatch( 1, [ 'Lorraine', 'Wise', 'Comveyer', 'false' ] );
135136 grid1.expectRowValuesMatch( 2, [ 'Nancy', 'Waters', 'Fuelton', 'false' ] );
0 commit comments