需要在Angular UI-Grid中将Bootstrap下拉列表的值赋给Row.Entity

Question

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

这是一个普朗克演示我的问题。

这是我的控制器代码:

    $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

我把你的活塞叉在这里

当您需要将选择绑定到每个网格行的模型时，您将选择绑定到单个作用域变量。您的模型需要一个名为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>