在ngGrid中使用ui bootstrap下拉列表

时间:2015-05-18 18:56:19

标签: angularjs button drop-down-menu angular-ui-bootstrap ng-grid

尝试在ngGrid http://angular-ui.github.io/ng-grid/的特定列中单击按钮时实现引导下拉列表,但无法显示下拉列表。

P.S。 :我试过让细胞溢出可见

javascript代码:

 var app = angular.module('myApp', ['ngGrid','ui.bootstrap']);
 app.controller('MyCtrl', function($scope) {
   $scope.editableInPopup = '<div class="btn-group" dropdown dropdown-append-to-body>'+
      '<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>'+
   ' Drop<span class="caret"></span>'+
  '</button>'+
  '<ul class="dropdown-menu" role="menu">'+
    '<li><a href="#">Action</a></li>'+
    '<li><a href="#">Another action</a></li>'+
    '<li><a href="#">Something else here</a></li>'+
    '<li class="divider"></li>'+
    '<li><a href="#">Separated link</a></li>'+
  '</ul>'+
'</div>'

$scope.edit = function edit(row){
    console.log("Here I need to know which button was selected " + row.entity.name)
}

$scope.myData = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData',
columnDefs: [{field:'name', displayName:'Name'}, {field:'age', displayName:'Age',editableCellTemplate:self.editableCellTempate ,enableCellEdit:true},
                    {displayName:'Pop up',cellTemplate:$scope.editableInPopup}]};
});

plunkr:http://plnkr.co/edit/7eon4Psrol2DeVWjZPwN?p=preview

1 个答案:

答案 0 :(得分:1)

更新plunker中的库修复了问题所做的更改:

    <dependency>
        <groupId>commons-dbcp</groupId>
        <artifactId>commons-dbcp</artifactId>
        <version>1.4</version>
    </dependency>