带有ng-grid主细节范例的angularjs，它具有多模式选择

Question

道歉令人困惑的头衔。所以我有多选+ ng-grid工作here。

对于那些不确定主/细节范例是什么的人。我从网格中选择一行并以某种方式显示其所有属性，以便从网格中获取行的完整视图（主要在网格内部，细节是对象属性）

我希望它能像

那样做

但我似乎无法弄清楚如何让这种类型的细节视图出现。我认为我需要某种类型的emit/broadcast/on类型的事件。那么问题是如何在angularjs + ng-grid中使用模态和多个选择来进行主/细节视图？

Answer 1

我不确定你想要如何创建模态，但有很多选择。一个是angular bootstrap模态。

除此之外，在从ng-grid中获取数据方面，您可以使用afterSelectionChange网格选项委派给在选择完成后将触发的函数。

This fork of your plunker演示了使用afterSelectionChange。

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

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

$scope.details = null;

然后您可以ng-repeat结果：

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

我希望这会有所帮助。如果我错过了什么，请告诉我。

修改

好的，我将角度自举模式集成到this plunker。

在没有ng-grid的情况下查看角度引导模态的示例也可能有所帮助。你可以找到here in this modal plunker。