Rani Radcliff Rani Radcliff - 18 days ago 13
AngularJS Question

Need to Assign Value of Bootstrap Dropdown in Angular UI-Grid to Row.Entity

I need to use a Bootstrap dropdown-menu in my ui-grid cellTemplate, and capture the selection in order to show their selection on the button. The problem is that because I can't use

ng-model
on a
<li>
, when I capture the selection, all of the dropdowns in the grid are updated with the selection text.

Here is a Plunker demonstrating my issue.

Here is my Controller code:

$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;
});


Here is my 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>


Any assistance is greatly appreciated!

Answer

I have forked your plunker here

You're binding the selection to a single scope variable when you need to bind it to a model per grid row. Your model needs a column called Action to correspond with your grid config. For the sake of the example I simply added a column:

$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;
});

I modified setAction() to pass in the row and the selected action:

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

And changed your cell template to work with the controller changes:

<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>
Comments