@@ -94,10 +94,12 @@ $scope.gridOptions.columnDefs = [
94
94
};
95
95
});
96
96
97
- app.controller('MainCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
98
- $scope.gridOptions = { } ;
97
+ app.controller('MainCtrl', function ($scope, $http, $timeout) {
98
+ var vm = this ;
99
99
100
- $scope.storeFile = function( gridRow, gridCol, files ) {
100
+ vm.gridOptions = { };
101
+
102
+ vm.storeFile = function( gridRow, gridCol, files ) {
101
103
// ignore all but the first file, it can only select one anyway
102
104
// set the filename into this column
103
105
gridRow.entity.filename = files[0].name;
@@ -106,15 +108,15 @@ $scope.gridOptions.columnDefs = [
106
108
var setFile = function(fileContent){
107
109
gridRow.entity.file = fileContent.currentTarget.result;
108
110
// put it on scope so we can display it - you'd probably do something else with it
109
- $scope .lastFile = fileContent.currentTarget.result;
111
+ vm .lastFile = fileContent.currentTarget.result;
110
112
$scope.$apply();
111
113
};
112
114
var reader = new FileReader();
113
115
reader.onload = setFile;
114
116
reader.readAsText( files[0] );
115
117
};
116
118
117
- $scope .gridOptions.columnDefs = [
119
+ vm .gridOptions.columnDefs = [
118
120
{ name: 'id', enableCellEdit: false, width: '10%' },
119
121
{ name: 'name', displayName: 'Name (editable)', width: '20%' },
120
122
{ name: 'age', displayName: 'Age' , type: 'number', width: '10%' },
@@ -126,9 +128,9 @@ $scope.gridOptions.columnDefs = [
126
128
{ name: 'registered', displayName: 'Registered' , type: 'date', cellFilter: 'date:"yyyy-MM-dd"', width: '20%' },
127
129
{ name: 'address', displayName: 'Address', type: 'object', cellFilter: 'address', width: '30%' },
128
130
{ name: 'address.city', displayName: 'Address (even rows editable)', width: '20%',
129
- cellEditableCondition: function($ scope){
130
- return $ scope.rowRenderIndex%2
131
- }
131
+ cellEditableCondition: function(scope){
132
+ return scope.rowRenderIndex%2;
133
+ }
132
134
},
133
135
{ name: 'isActive', displayName: 'Active', type: 'boolean', width: '10%' },
134
136
{ name: 'pet', displayName: 'Pet', width: '20%', editableCellTemplate: 'ui-grid/dropdownEditor',
@@ -151,19 +153,19 @@ $scope.gridOptions.columnDefs = [
151
153
}
152
154
},
153
155
{ name: 'filename', displayName: 'File', width: '20%', editableCellTemplate: 'ui-grid/fileChooserEditor',
154
- editFileChooserCallback: $scope .storeFile }
155
- ];
156
+ editFileChooserCallback: vm .storeFile }
157
+ ];
156
158
157
- $scope .msg = {};
159
+ vm .msg = {};
158
160
159
- $scope .gridOptions.onRegisterApi = function(gridApi){
160
- //set gridApi on scope
161
- $scope .gridApi = gridApi;
162
- gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
163
- $scope .msg.lastCellEdited = 'edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue ;
164
- $scope.$apply();
165
- });
166
- };
161
+ vm .gridOptions.onRegisterApi = function(gridApi) {
162
+ //set gridApi on scope
163
+ vm .gridApi = gridApi;
164
+ gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
165
+ vm .msg.lastCellEdited = 'edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue ;
166
+ $scope.$apply();
167
+ });
168
+ };
167
169
168
170
$http.get('/data/500_complex.json')
169
171
.then(function(response) {
@@ -181,9 +183,9 @@ $scope.gridOptions.columnDefs = [
181
183
data[i].foo = {bar: [{baz: 2, options: [{value: 'dog'}, {value: 'cat'}]}]}
182
184
}
183
185
}
184
- $scope .gridOptions.data = data;
186
+ vm .gridOptions.data = data;
185
187
});
186
- }] )
188
+ })
187
189
188
190
.filter('mapGender', function() {
189
191
var genderHash = {
@@ -218,15 +220,15 @@ $scope.gridOptions.columnDefs = [
218
220
});
219
221
</file>
220
222
<file name="index.html">
221
- <div ng-controller="MainCtrl">
222
- <strong>Data Length:</strong> {{ gridOptions.data.length | number }}
223
+ <div ng-controller="MainCtrl as $ctrl ">
224
+ <strong>Data Length:</strong> {{ $ctrl. gridOptions.data.length | number }}
223
225
<br>
224
- <strong>Last Cell Edited:</strong> {{msg.lastCellEdited}}
226
+ <strong>Last Cell Edited:</strong> {{$ctrl. msg.lastCellEdited}}
225
227
<br>
226
- <div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
228
+ <div ui-grid="$ctrl. gridOptions" ui-grid-edit class="grid"></div>
227
229
<br>
228
230
<div><strong>Last file uploaded:</strong></div>
229
- <div>{{lastFile}}</div>
231
+ <div>{{$ctrl. lastFile}}</div>
230
232
</div>
231
233
</file>
232
234
<file name="main.css">
0 commit comments