Javascript ng网格展开和折叠行

我正在尝试为ng grid实现一个展开和折叠行，基本上就是我们在这里看到的，如果你点击“加号图标”，你会显示更多的细节

我在这里看到了一个类似的问题，但没有解决方案

有人知道如何做到这一点吗

感谢您的帮助

var-app=angularexpand（'myApp'，['ngGrid']）；
应用程序控制器（'MyCtrl'，函数（$scope）{
$scope.myData=[{
somedata:“要在另一个中扩展的数据”，
更多数据：1
}, {
somedata:“b数据将在另一个中展开”，
更多数据2
}, {
somedata:“要在另一个中扩展的c数据”，
更多数据：3
}, {
somedata:“要在另一个中扩展的d数据”，
更多数据：4
}, {
somedata:“将数据扩展到另一个中”，
更多数据：5
}];
$scope.gridOptions={
数据：“myData”
};
$scope.expandRow=函数（e）{
e、 预防默认值（）；
var getData={
某些数据：“”，
更多数据：“”
};
$scope.gridOptions.selectItem（index，false）；
$scope.myData.splice（索引+1,0，getData）；
$（this.row.elm）.append（“”+this.row.entity.somedata+“”）；
};
});

添加行
我从未使用ng grid实现过这一点，但是，我使用常规表实现了这一功能。您可以编写一个自定义指令来解决这个问题

按照下面的思路应该可以做到这一点。这个例子没有在JSFIDLE中测试。这里的关键是使用“ng repeat start”和“ng repeat end”，而不仅仅是“ng repeat”

HTML:


目前，nggrid不支持此功能[issue#1111][1]，它正在UIGrid 3.0版本中实现

但我发现了一个解决方法，这就是如何使用rowTemplate和一点jquery在nggrid中实现的。希望这有帮助

行模板：

"< div class="**row**" >"

  "add column data"

  // expand or collapse image

    < div class=\"col-xs-1 col-md-1\" >< img "id='**showHide**_{{row.rowIndex}}' ng-src='src/img/{{**imgArrowRight**}}' ng-click=\"**rowExpand** (row.rowIndex);\" />< / div>"< /div>< div id='**expRowId**_{{row.rowIndex}}' style=\"display:none;\">< div class=\"**expData**\">< span ng-bind=\"**row.entity.Attr**\">< /span>
//add whatever you want in the expanded row.< /div>< /div>

//Defined customArray for handling dynamic row Toggle

 angular.forEach($scope.**gridData**, function(row,index) {
                $scope.customArray[index] = true;
 });

//row expand code

$scope.**rowExpand** = function(**index**){
                        $scope.customArray[index] = $scope.customArray[index] === false ? true : false;

                        if($scope.customArray[index]){
                            $('#showHide_'+index).attr('src','src/assets/img/rigthIcon.gif');
                            $('#expRowId_'+index).hide();
                        }else{
                            $('#showHide_'+index).attr('src','src/assets/img/downIcon.gif');
                            $('#expRowId_'+index).show();
                        }
                    }

我已经编辑了我的文章，我基本上试着在一个虚拟行上附加一个div，而不是完全有角度的方式，因为我使用append，它有时会工作，有时会导致特殊的行为一把工作小提琴会很棒！这是一个加载了angularjs的空表：似乎ng grid将对3.0进行重大改进，包括隐藏/显示开箱即用等功能，现在我只使用已经包含所有这些功能的datatables。阿尔卑斯山感谢您的帮助。@ninjamaster如果您已经自己回答了问题，请毫不犹豫地发布并接受它。看见
.ngRow {
    position: relative !important;
}