Collapsible rows in AngularJS ng-Grid

Question

I want ng-Grid to have collapsible rows.

My javascript :-

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "aaa", age: 50, designation: "TR", quotes: "some text"},
                 {name: "aaa", age: 43, designation: "PR", quotes: "some text"},
                 {name: "aaa", age: 27, designation: "Architech", quotes: "some text"},
                 {name: "aaa", age: 29, designation: "Intern", quotes: "some text"},
                 {name: "aaa", age: 34, designation: "HOD", quotes: "some text"},
                 {name: "aaa", age: 34, designation: "TR", quotes: "some text"}];

$scope.expandOperator = false
$scope.expandableButton = '<button ng-show="expandOperator" ng-click="expandOperator = false">-</button><button ng-show="!expandOperator" ng-click="expandOperator = true">+</button>'
$scope.expandableRow = '<div ng-if="expandOperator" {{myData.quotes}}</div>'
$scope.nameField = '<div>{{myData.name}}<div ng-show="expandOperator">{{myData.quotes}}</div></div></div>'
$scope.editableInPopup = '<button id="editBtn" type="button" class="btn btn-primary" ng-click="edit(row)" >Edit</button>
$scope.designationDropDown = '<select name="designations"><option value="TR">TR</option><option value="PR">PR</option><option value="HOD">HOD</option><option value="SE">SE</option><option value="Intern">Intern</option></select>'
$scope.$on('ngGridEventRowSeleted',function(event,row){
    $scope.selectedRow=row;
});
$scope.gridOptions = { 
    data: 'myData',

    rowTemplate: '<div ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex(),\'height\': \'150px\' }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div>',

    columnDefs: [{field:'expand', displayName:'Expand', cellTemplate:$scope.expandableButton},{field:'name', displayName:'Name', enableCellEdit: true, cellTemplate:$scope.nameField}, {field:'age', displayName:'Age', enableCellEdit: true}, {field:'designation', displayName:'Designation', enableCellEdit: true}, {displayName:'Update',cellTemplate:$scope.editableInPopup, enableCellEdit:false}],

    showGroupPanel: true,

    selectedItems: $scope.selectedElements,

    multiSelect: false

};

});

I have loaded all scripts in my html file but still the collapsibility is not there. Although The name field of the grid doesn't render correctly(values are missing).

Also in Chrome console I'm getting the following errors/warnings:-

Uncaught Error: [$injector:unpr] Unknown provider: $animateProvider <- $animate
http://errors.angularjs.org/1.2.0-rc.2/$injector/unpr?p0=%24animateProvider%20%3C-%20%24animate angular.js:78
Attr.specified is deprecated. Its value is always true. angular.min.js:39
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. 

can someone guide me how to enable collapsible rows in ng-grid.

Answer 1

Looks like you have a problem with your angular version. Use the latest angularJS version. It'll remove, Uncaught Error: [$injector:unpr] Unknown provider: $animateProvider <- $animate warning.