Question

我需要在我的ui-grid cellTemplate中使用Bootstrap下拉菜单，并捕获选择以便在按钮上显示它们的选择。问题是，因为我无法在ng-model上使用<li>，所以当我捕获选择时，网格中的所有下拉列表都会使用选择文本进行更新。

这是一个Plunker来证明我的问题。

这是我的控制器代码：

    $scope.actions = [

  { id: 'action1', name: 'Action 1' },
  { id: 'action2', name: 'Action 2' }
    ];
    $scope.selectedAction = { id: 'action0', name: 'SelectOne' };
    $scope.setAction = function (action) {
        $scope.selectedAction = action;
        $scope.submitAction();
    };
    $scope.submitAction = function () {
        console.log($scope.selectedAction.id);
    };
  $scope.gridOptions = { rowHeight: 38 };

  $scope.gridOptions.columnDefs = [
    { name: 'id', enableCellEdit: false },
    { name: 'name', displayName: 'Name (editable)' },
    { name: 'age', displayName: 'Age' , type: 'number' },
    {
                      field: 'Action', displayName: 'Action',                
                cellClass: 'center',
      cellTemplate: 'myDropDown.html',
      enableSorting: false
    }
  ];

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });

这是我的HTML：

    <div class="ui-grid-cell-contents">
  <div class="btn-group" dropdown dropdown-append-to-body>
    <button type="button" class="btn btn-xs btn-primary dropdown-toggle" dropdown-toggle ng-click="grid.appScoe.submitAction()">
      {{grid.appScope.selectedAction.name}}<span class="caret"></span>
    </button>
<ul class="dropdown-menu" style="width:230px"><li ng-repeat="action in grid.appScope.actions"><span ng-click="grid.appScope.setAction(action)">{{action.name}}</span></li></ul>
  </div>
</div>

非常感谢任何帮助！

Answer 1

我已经分叉了你的傻瓜here

当您需要将选择绑定到每个网格行的模型时，您将选择绑定到单个范围变量。您的模型需要一个名为Action的列来与您的网格配置相对应。为了示例，我只添加了一列：

$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
  data.map(function(element) {
    element.Action = $scope.selectedAction;
  });
  $scope.gridOptions.data = data;
});

我修改了setAction（）以传入行和所选的操作：

$scope.setAction = function(row, action) {
   row.entity.Action = action;
   $scope.submitAction();
};

并更改了您的单元格模板以使用控制器更改：

<div class="ui-grid-cell-contents">
   <div class="btn-group" dropdown dropdown-append-to-body>
      <button type="button" class="btn btn-xs btn-primary dropdown-toggle" dropdown-toggle ng-click="grid.appScoe.submitAction()">
        {{row.entity.Action.name}}<span class="caret"></span>
      </button>
      <ul class="dropdown-menu" style="width:230px"><li ng-repeat="action in grid.appScope.actions"><span ng-click="grid.appScope.setAction(row, action)">{{action.name}}</span></li></ul>
   </div>
</div>

需要将Angular UI-Grid中Bootstrap Dropdown的值分配给Row.Entity

1 个答案: