@@ -48,19 +48,19 @@ Steps:
48
48
</pre>
49
49
</li>
50
50
<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
52
52
<pre>
53
- $scope .myData = [
53
+ this .myData = [
54
54
{
55
55
"firstName": "Cox",
56
56
"lastName": "Carney"...
57
57
</pre>
58
58
</li>
59
59
<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.
61
61
<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>
64
64
</div>
65
65
</pre>
66
66
@@ -71,35 +71,35 @@ Steps:
71
71
@example
72
72
<example module="app">
73
73
<file name="app.js">
74
- var app = angular.module('app', ['ngTouch', 'ui.grid']);
74
+ angular.module('app', ['ngTouch', 'ui.grid'])
75
+ .controller('MainCtrl', MainCtrl);
75
76
76
- app.controller('MainCtrl', ['$scope', function ($scope) {
77
-
78
- $scope.myData = [
77
+ function MainCtrl() {
78
+ this.myData = [
79
79
{
80
- " firstName" : "Cox",
81
- " lastName" : "Carney",
82
- " company" : "Enormo",
83
- " employed" : true
80
+ firstName: "Cox",
81
+ lastName: "Carney",
82
+ company: "Enormo",
83
+ employed: true
84
84
},
85
85
{
86
- " firstName" : "Lorraine",
87
- " lastName" : "Wise",
88
- " company" : "Comveyer",
89
- " employed" : false
86
+ firstName: "Lorraine",
87
+ lastName: "Wise",
88
+ company: "Comveyer",
89
+ employed: false
90
90
},
91
91
{
92
- " firstName" : "Nancy",
93
- " lastName" : "Waters",
94
- " company" : "Fuelton",
95
- " employed" : false
92
+ firstName: "Nancy",
93
+ lastName: "Waters",
94
+ company: "Fuelton",
95
+ employed: false
96
96
}
97
- ];
98
- }]);
97
+ ];
98
+ }
99
99
</file>
100
100
<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>
103
103
</div>
104
104
</file>
105
105
<file name="main.css">
@@ -110,26 +110,27 @@ Steps:
110
110
</file>
111
111
112
112
<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
+
115
116
describe('101 tutorial', function() {
116
- it('grid should have three visible rows', function () {
117
+ it('grid should have three visible rows', function() {
117
118
grid1.expectRowCount( 3 );
118
119
});
119
120
120
- it('header values should be as expected', function () {
121
+ it('header values should be as expected', function() {
121
122
grid1.expectHeaderColumns( ['First Name', 'Last Name', 'Company', 'Employed'] );
122
123
});
123
124
124
- it('first row cell values should be as expected', function () {
125
+ it('first row cell values should be as expected', function() {
125
126
// checking individual cells usually gives a better stack trace when there are errors
126
127
grid1.expectCellValueMatch( 0, 0, 'Cox' );
127
128
grid1.expectCellValueMatch( 0, 1, 'Carney' );
128
129
grid1.expectCellValueMatch( 0, 2, 'Enormo' );
129
130
grid1.expectCellValueMatch( 0, 3, 'true' );
130
131
});
131
132
132
- it('next two row cell values should be as expected', function () {
133
+ it('next two row cell values should be as expected', function() {
133
134
// checking in bulk is convenient to write, but can be less informative with errors
134
135
grid1.expectRowValuesMatch( 1, [ 'Lorraine', 'Wise', 'Comveyer', 'false' ] );
135
136
grid1.expectRowValuesMatch( 2, [ 'Nancy', 'Waters', 'Fuelton', 'false' ] );
0 commit comments