Apologies for the confusing title. So I have multi-select + ng-grid working here .

For anyone who isn't sure what the master/detail paradigm is. I select a row from my grid and expose all of its properties in some fashion for a plete view of the row from my grid (master being inside the grid, details being the object properties)

I want it to do something like

But I cannot seem to figure out how to get this type of detail view to occur. I presume I need to have some type of emit/broadcast/on type set of events. So again the question is how do I do the master/detail view with a modal and multiple selections in angularjs + ng-grid?

Apologies for the confusing title. So I have multi-select + ng-grid working here .

For anyone who isn't sure what the master/detail paradigm is. I select a row from my grid and expose all of its properties in some fashion for a plete view of the row from my grid (master being inside the grid, details being the object properties)

I want it to do something like

But I cannot seem to figure out how to get this type of detail view to occur. I presume I need to have some type of emit/broadcast/on type set of events. So again the question is how do I do the master/detail view with a modal and multiple selections in angularjs + ng-grid?

• javascript
• angularjs
• modal-dialog
• ng-grid

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Nov 11, 2013 at 14:42 Woot4MooWoot4Moo 24.3k1818 gold badges100100 silver badges156156 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

I'm not exactly sure how you want to create the modal, but there are plenty of choices out there. One being the angular bootstrap modal.

That aside, in terms of getting data out of ng-grid, you can use the afterSelectionChange grid option to delegate to a function that will fire after a selection has been made.

This fork of your plunker demonstrates using afterSelectionChange.

$scope.gridOptions = { 
  data: 'myData',
  selectedItems: $scope.mySelections,
  multiSelect: true,
  afterSelectionChange: function() {

    $scope.details = $scope.mySelections;
  }
};

$scope.details = null;

You can then ng-repeat the results:

<button ng-click="show = !show">Show/Hide Details</button>
<div class="selectedItems" ng-show="show">
  You have selected:<br/><br/>
  <div ng-repeat="detail in details">
    name: {{ detail.name }}<br/>
    age: {{ detail.age }}
  </div>
</div>

I hope this helps. Let me know if there is something I missed.

EDIT:

Ok, I integrated angular bootstrap modal into this plunker.

It might also help to look at an example of the angular bootstrap modal without ng-grid. You can find that here in this modal plunker.