diff --git a/misc/tutorial/101_intro.ngdoc b/misc/tutorial/101_intro.ngdoc index e5416ae2d6..2068f7b923 100644 --- a/misc/tutorial/101_intro.ngdoc +++ b/misc/tutorial/101_intro.ngdoc @@ -48,19 +48,19 @@ Steps:
  • - Add an array of data to a property on your $scope + Add an array of data to a property on your controller 
    -     $scope.myData = [
+     this.myData = [
              {
                  "firstName": "Cox",
                  "lastName": "Carney"...
  • - Use the ui-grid directive and specify a json object with a data property referencing your $scope.myData property. + Use the ui-grid directive and specify a json object with a data property referencing your $ctrl.myData property. 
    -     
    
-       
    
+     
    
+
    @@ -71,35 +71,35 @@ Steps: @example - var app = angular.module('app', ['ngTouch', 'ui.grid']); + angular.module('app', ['ngTouch', 'ui.grid']) + .controller('MainCtrl', MainCtrl); - app.controller('MainCtrl', ['$scope', function ($scope) { - - $scope.myData = [ + function MainCtrl() { + this.myData = [ { - "firstName": "Cox", - "lastName": "Carney", - "company": "Enormo", - "employed": true + firstName: "Cox", + lastName: "Carney", + company: "Enormo", + employed: true }, { - "firstName": "Lorraine", - "lastName": "Wise", - "company": "Comveyer", - "employed": false + firstName: "Lorraine", + lastName: "Wise", + company: "Comveyer", + employed: false }, { - "firstName": "Nancy", - "lastName": "Waters", - "company": "Fuelton", - "employed": false + firstName: "Nancy", + lastName: "Waters", + company: "Fuelton", + employed: false } - ]; - }]); + ]; + } -
    -
    +
    +
    @@ -110,18 +110,19 @@ Steps: - var GridObjectTest = require('../../test/e2e/gridObjectTestUtils.spec.js'); - var grid1 = new GridObjectTest('grid1'); + var GridObjectTest = require('../../test/e2e/gridObjectTestUtils.spec.js'), + grid1 = new GridObjectTest('grid1'); + describe('101 tutorial', function() { - it('grid should have three visible rows', function () { + it('grid should have three visible rows', function() { grid1.expectRowCount( 3 ); }); - it('header values should be as expected', function () { + it('header values should be as expected', function() { grid1.expectHeaderColumns( ['First Name', 'Last Name', 'Company', 'Employed'] ); }); - it('first row cell values should be as expected', function () { + it('first row cell values should be as expected', function() { // checking individual cells usually gives a better stack trace when there are errors grid1.expectCellValueMatch( 0, 0, 'Cox' ); grid1.expectCellValueMatch( 0, 1, 'Carney' ); @@ -129,7 +130,7 @@ Steps: grid1.expectCellValueMatch( 0, 3, 'true' ); }); - it('next two row cell values should be as expected', function () { + it('next two row cell values should be as expected', function() { // checking in bulk is convenient to write, but can be less informative with errors grid1.expectRowValuesMatch( 1, [ 'Lorraine', 'Wise', 'Comveyer', 'false' ] ); grid1.expectRowValuesMatch( 2, [ 'Nancy', 'Waters', 'Fuelton', 'false' ] ); diff --git a/misc/tutorial/102_sorting.ngdoc b/misc/tutorial/102_sorting.ngdoc index 9a315755d2..a50589eed6 100644 --- a/misc/tutorial/102_sorting.ngdoc +++ b/misc/tutorial/102_sorting.ngdoc @@ -44,10 +44,15 @@ columnDef option will cause sorting to be applied after the `cellFilters` are ap - var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']); + angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']) + .controller('MainCtrl', MainCtrl); - app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) { - $scope.gridOptions1 = { + MainCtrl.$inject = ['$http', 'uiGridConstants']; + + function MainCtrl($http, uiGridConstants) { + var vm = this; + + vm.gridOptions1 = { enableSorting: true, columnDefs: [ { field: 'name' }, @@ -55,23 +60,23 @@ columnDef option will cause sorting to be applied after the `cellFilters` are ap { field: 'company', enableSorting: false } ], onRegisterApi: function( gridApi ) { - $scope.grid1Api = gridApi; + vm.grid1Api = gridApi; } }; - $scope.toggleGender = function() { - if( $scope.gridOptions1.data[64].gender === 'male' ) { - $scope.gridOptions1.data[64].gender = 'female'; + vm.toggleGender = function() { + if( vm.gridOptions1.data[64].gender === 'male' ) { + vm.gridOptions1.data[64].gender = 'female'; } else { - $scope.gridOptions1.data[64].gender = 'male'; + vm.gridOptions1.data[64].gender = 'male'; }; - $scope.grid1Api.core.notifyDataChange( uiGridConstants.dataChange.EDIT ); + vm.grid1Api.core.notifyDataChange( uiGridConstants.dataChange.EDIT ); }; - $scope.gridOptions2 = { + vm.gridOptions2 = { enableSorting: true, onRegisterApi: function( gridApi ) { - $scope.grid2Api = gridApi; + vm.grid2Api = gridApi; }, columnDefs: [ { @@ -89,7 +94,7 @@ columnDef option will cause sorting to be applied after the `cellFilters` are ap }, suppressRemoveSort: true, sortingAlgorithm: function(a, b, rowA, rowB, direction) { - var nulls = $scope.grid2Api.core.sortHandleNulls(a, b); + var nulls = vm.grid2Api.core.sortHandleNulls(a, b); if( nulls !== null ) { return nulls; } else { @@ -118,13 +123,13 @@ columnDef option will cause sorting to be applied after the `cellFilters` are ap $http.get('/data/100.json') .then(function(response) { - $scope.gridOptions1.data = response.data; - $scope.gridOptions2.data = response.data; + vm.gridOptions1.data = response.data; + vm.gridOptions2.data = response.data; }); - }]); + } -
    +
    Click on a column header to sort by that column. (The third column has sorting disabled.) To demonstrate the live sorting we provide a button that toggles the gender of Alexander Foley. Sort by gender (ASC - so click twice) then name (using shift click), so that Alexander is at the top of the grid, @@ -132,8 +137,8 @@ columnDef option will cause sorting to be applied after the `cellFilters` are ap

    - -
    + +

    You can set an initial sort state for the grid by defining the `sort` property on your column definitions. @@ -142,7 +147,7 @@ columnDef option will cause sorting to be applied after the `cellFilters` are ap

    -
    +
    @@ -152,25 +157,25 @@ columnDef option will cause sorting to be applied after the `cellFilters` are ap } - var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js'); - var GridObjectTest = require('../../test/e2e/gridObjectTestUtils.spec.js'); - var grid1 = new GridObjectTest('grid1'); - var grid2 = new GridObjectTest('grid2'); + var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js'), + GridObjectTest = require('../../test/e2e/gridObjectTestUtils.spec.js'), + grid1 = new GridObjectTest('grid1'), + grid2 = new GridObjectTest('grid2'); describe('first grid on the page, no default sort', function() { // Reload the page before each test if on Firefox. Chrome does it automatically. gridTestUtils.firefoxReload(); - it('header values should be as expected', function () { + it('header values should be as expected', function() { grid1.expectHeaderColumns( [ 'Name', 'Gender', 'Company' ] ); }); - it('grid should be unsorted by default', function () { + it('grid should be unsorted by default', function() { grid1.expectCellValueMatch( 0, 0, 'Ethel Price' ); grid1.expectCellValueMatch( 1, 0, 'Claudine Neal' ); }); - it('sort by name by clicking header', function () { + it('sort by name by clicking header', function() { grid1.clickHeaderCell( 0 ) .then(function () { grid1.expectCellValueMatch( 0, 0, 'Alexander Foley' ); @@ -178,26 +183,26 @@ columnDef option will cause sorting to be applied after the `cellFilters` are ap }); }); - it('reverse sort by name by clicking header', function () { + it('reverse sort by name by clicking header', function() { grid1.clickHeaderCell( 0 ) .then(function () { return grid1.clickHeaderCell( 0 ); }) - .then(function () { + .then(function() { grid1.expectCellValueMatch( 0, 0, 'Yvonne Parsons' ); grid1.expectCellValueMatch( 1, 0, 'Woods Key' ); }); }); - it('return to original sort by name by clicking header', function () { + it('return to original sort by name by clicking header', function() { grid1.clickHeaderCell( 0 ) - .then(function () { + .then(function() { return grid1.clickHeaderCell( 0 ); }) - .then(function () { + .then(function() { return grid1.clickHeaderCell( 0 ); }) - .then(function () { + .then(function() { grid1.expectCellValueMatch( 0, 0, 'Ethel Price' ); grid1.expectCellValueMatch( 1, 0, 'Claudine Neal' ); }); @@ -205,7 +210,7 @@ columnDef option will cause sorting to be applied after the `cellFilters` are ap it('sort asc by clicking menu', function() { grid1.clickColumnMenuSortAsc( 0 ) - .then(function () { + .then(function() { grid1.expectCellValueMatch( 0, 0, 'Alexander Foley' ); grid1.expectCellValueMatch( 1, 0, 'Alisha Myers' ); }); @@ -213,15 +218,15 @@ columnDef option will cause sorting to be applied after the `cellFilters` are ap it('sort desc by clicking menu, then remove sort', function() { grid1.clickColumnMenuSortDesc( 0 ) - .then(function () { + .then(function() { grid1.expectCellValueMatch( 0, 0, 'Yvonne Parsons' ); grid1.expectCellValueMatch( 1, 0, 'Woods Key' ); return true; }) - .then(function () { + .then(function() { return grid1.clickColumnMenuRemoveSort( 0 ); }) - .then(function () { + .then(function() { grid1.expectCellValueMatch( 0, 0, 'Ethel Price' ); grid1.expectCellValueMatch( 1, 0, 'Claudine Neal' ); }); @@ -229,10 +234,10 @@ columnDef option will cause sorting to be applied after the `cellFilters` are ap it('sort two columns, gender then name, by shift clicking', function() { grid1.clickHeaderCell( 1 ) - .then(function () { + .then(function() { return grid1.shiftClickHeaderCell( 0 ); }) - .then(function () { + .then(function() { grid1.expectCellValueMatch( 0, 0, 'Alisha Myers' ); grid1.expectCellValueMatch( 1, 0, 'Beryl Rice' ); }); @@ -240,7 +245,7 @@ columnDef option will cause sorting to be applied after the `cellFilters` are ap it('sort disabled on last column', function() { grid1.clickHeaderCell( 2 ) - .then(function () { + .then(function() { grid1.expectCellValueMatch( 0, 0, 'Ethel Price' ); grid1.expectCellValueMatch( 1, 0, 'Claudine Neal' ); }); @@ -254,61 +259,58 @@ columnDef option will cause sorting to be applied after the `cellFilters` are ap it('toggle gender, expect Alexander Foley to move around', function() { // sort gender asc, then name grid1.clickHeaderCell( 1 ) - .then(function () { + .then(function() { return grid1.clickHeaderCell( 1 ); }) - .then(function () { + .then(function() { return grid1.shiftClickHeaderCell( 0 ); }) - .then(function () { + .then(function() { grid1.expectCellValueMatch( 0, 0, 'Alexander Foley' ); }) - .then(function () { + .then(function() { return gridTestUtils.click(element(by.id('toggleGender'))); }) - .then(function () { + .then(function() { grid1.expectCellValueMatch( 0, 0, 'Anthony Joyner' ); }) - .then(function () { + .then(function() { return gridTestUtils.click(element(by.id('toggleGender'))); }) - .then(function () { + .then(function() { grid1.expectCellValueMatch( 0, 0, 'Alexander Foley' ); }); }); - }); - describe('second grid on the page, has default sort', function() { - it('header values should be as expected', function () { + it('header values should be as expected', function() { grid2.expectHeaderColumns( [ 'Name', 'Gender', 'Company' ] ); }); - it('grid should be sorted by default', function () { + it('grid should be sorted by default', function() { grid2.expectCellValueMatch( 0, 0, 'Yvonne Parsons' ); grid2.expectCellValueMatch( 1, 0, 'Velma Fry' ); }); - it('sort on second column can\'t be removed when cycle through header clicks', function () { + it('sort on second column can\'t be removed when cycle through header clicks', function() { grid2.clickHeaderCell( 0 ) - .then(function () { + .then(function() { grid2.expectCellValueMatch( 0, 0, 'Ethel Price' ); }) - .then(function () { + .then(function() { return grid2.clickHeaderCell( 1 ); }) - .then(function () { + .then(function() { grid2.expectCellValueMatch( 0, 0, 'Wilder Gonzales' ); }) - .then(function () { + .then(function() { return grid2.clickHeaderCell( 1 ); }) - .then(function () { + .then(function() { grid2.expectCellValueMatch( 0, 0, 'Ethel Price' ); }); }); }); - diff --git a/misc/tutorial/103_filtering.ngdoc b/misc/tutorial/103_filtering.ngdoc index c676962daf..73031e93d3 100644 --- a/misc/tutorial/103_filtering.ngdoc +++ b/misc/tutorial/103_filtering.ngdoc @@ -86,14 +86,20 @@ Refer {@link 321_singleFilter singleFilter tutorial}, it is possible to implemen @example - var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']); + angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']) + .controller('MainCtrl', MainCtrl) + .filter('mapGender', mapGender); + + MainCtrl.$inject = ['$http', 'uiGridConstants']; + + function MainCtrl($http, uiGridConstants) { + var vm = this, + today = new Date(), + nextWeek = new Date(); - app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) { - var today = new Date(); - var nextWeek = new Date(); nextWeek.setDate(nextWeek.getDate() + 7); - $scope.highlightFilteredHeader = function( row, rowRenderIndex, col, colRenderIndex ) { + vm.highlightFilteredHeader = function( row, rowRenderIndex, col, colRenderIndex ) { if( col.filters[0].term ){ return 'header-filtered'; } else { @@ -101,21 +107,21 @@ Refer {@link 321_singleFilter singleFilter tutorial}, it is possible to implemen } }; - $scope.gridOptions = { + vm.gridOptions = { enableFiltering: true, onRegisterApi: function(gridApi){ - $scope.gridApi = gridApi; + vm.gridApi = gridApi; }, columnDefs: [ // default - { field: 'name', headerCellClass: $scope.highlightFilteredHeader }, + { field: 'name', headerCellClass: vm.highlightFilteredHeader }, // pre-populated search field { field: 'gender', filter: { term: '1', type: uiGridConstants.filter.SELECT, selectOptions: [ { value: '1', label: 'male' }, { value: '2', label: 'female' }, { value: '3', label: 'unknown'}, { value: '4', label: 'not stated' }, { value: '5', label: 'a really long value that extends things' } ] }, - cellFilter: 'mapGender', headerCellClass: $scope.highlightFilteredHeader }, + cellFilter: 'mapGender', headerCellClass: vm.highlightFilteredHeader }, // no filter input { field: 'company', enableFiltering: false, filter: { noTerm: true, @@ -130,7 +136,7 @@ Refer {@link 321_singleFilter singleFilter tutorial}, it is possible to implemen filter: { condition: uiGridConstants.filter.ENDS_WITH, placeholder: 'ends with' - }, headerCellClass: $scope.highlightFilteredHeader + }, headerCellClass: vm.highlightFilteredHeader }, // custom condition function { @@ -140,7 +146,7 @@ Refer {@link 321_singleFilter singleFilter tutorial}, it is possible to implemen var strippedValue = (cellValue + '').replace(/[^\d]/g, ''); return strippedValue.indexOf(searchTerm) >= 0; } - }, headerCellClass: $scope.highlightFilteredHeader + }, headerCellClass: vm.highlightFilteredHeader }, // multiple filters { field: 'age', filters: [ @@ -152,23 +158,28 @@ Refer {@link 321_singleFilter singleFilter tutorial}, it is possible to implemen condition: uiGridConstants.filter.LESS_THAN, placeholder: 'less than' } - ], headerCellClass: $scope.highlightFilteredHeader}, + ], headerCellClass: vm.highlightFilteredHeader}, // date filter { field: 'mixedDate', cellFilter: 'date', width: '15%', filter: { condition: uiGridConstants.filter.LESS_THAN, placeholder: 'less than', term: nextWeek - }, headerCellClass: $scope.highlightFilteredHeader + }, headerCellClass: vm.highlightFilteredHeader }, - { field: 'mixedDate', displayName: "Long Date", cellFilter: 'date:"longDate"', filterCellFiltered:true, width: '15%', + { + field: 'mixedDate', + displayName: 'Long Date', + cellFilter: 'date:"longDate"', + filterCellFiltered: true, + width: '15%' } ] }; $http.get('/data/500_complex.json') .then(function(response) { - $scope.gridOptions.data = response.data; - $scope.gridOptions.data[0].age = -5; + vm.gridOptions.data = response.data; + vm.gridOptions.data[0].age = -5; response.data.forEach( function addDates( row, index ){ row.mixedDate = new Date(); @@ -177,12 +188,13 @@ Refer {@link 321_singleFilter singleFilter tutorial}, it is possible to implemen }); }); - $scope.toggleFiltering = function(){ - $scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering; - $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN ); + vm.toggleFiltering = function(){ + vm.gridOptions.enableFiltering = !vm.gridOptions.enableFiltering; + vm.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN ); }; - }]) - .filter('mapGender', function() { + } + + function mapGender() { var genderHash = { 1: 'male', 2: 'female' @@ -195,18 +207,18 @@ Refer {@link 321_singleFilter singleFilter tutorial}, it is possible to implemen return genderHash[input]; } }; - }); + } -
    +
    You can use asterisks to fuzz-match, i.e. use "*z*" as your filter to show any row where that column contains a "z".

    Note: The third column has the filter input disabled, but actually has a filter set in code that requires every company to have an 'a' in their name.

    - -
    + +
    diff --git a/misc/tutorial/104_i18n.ngdoc b/misc/tutorial/104_i18n.ngdoc index c23d3426bd..47bdc9c379 100644 --- a/misc/tutorial/104_i18n.ngdoc +++ b/misc/tutorial/104_i18n.ngdoc @@ -23,13 +23,18 @@ For an example using angular-translate to translate your headers, refer to http: @example - var app = angular.module('app', ['ngTouch', 'ui.grid']); + angular.module('app', ['ngTouch', 'ui.grid']) + .controller('MainCtrl', MainCtrl); - app.controller('MainCtrl', ['$scope', 'i18nService', '$http', function ($scope, i18nService, $http) { - $scope.langs = i18nService.getAllLangs(); - $scope.lang = 'nl'; + MainCtrl.$inject = ['i18nService', '$http']; - $scope.gridOptions = { + function MainCtrl(i18nService, $http) { + var vm = this; + + vm.langs = i18nService.getAllLangs(); + vm.lang = 'nl'; + + vm.gridOptions = { columnDefs: [ { field: 'name' }, { field: 'gender' }, @@ -38,16 +43,16 @@ For an example using angular-translate to translate your headers, refer to http: }; $http.get('/data/100.json') - .then(function(response) { - $scope.gridOptions.data = response.data; - }); - }]); + .then(function(response) { + vm.gridOptions.data = response.data; + }); + } -
    -
    +
    +
    -
    +

    Using attribute:


    @@ -56,9 +61,8 @@ For an example using angular-translate to translate your headers, refer to http:

    Click the header menu to see language.

    -
    +
    -
    @@ -67,4 +71,18 @@ For an example using angular-translate to translate your headers, refer to http: height: 250px; } + + var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js'); + + describe('104 i18n', function() { + gridTestUtils.firefoxReload(); + + it('should default to nl for the language', function() { + expect(element(by.id('langDropdown')).element(by.css('option:checked')).getText()).toEqual('nl'); + }); + it('should have three visible columns', function() { + gridTestUtils.expectHeaderColumnCount( 'i18nGrid', 3 ); + }); + }); + \ No newline at end of file