Question

我希望ng-Grid有可折叠的行。

我的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

};

});

我已经在我的html文件中加载了所有脚本，但仍然没有可折叠性。虽然网格的名称字段没有正确呈现（值丢失）。

同样在Chrome控制台中，我收到以下错误/警告： -

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.

有人可以指导我如何在ng-grid中启用可折叠行。

Answer 1

您的角度版本看起来有问题。使用最新的angularJS版本。它会删除Uncaught Error: [$injector:unpr] Unknown provider: $animateProvider <- $animate警告。

AngularJS ng-Grid中的可折叠行

1 个答案: