javascript - 具有 ng-grid 主细节范例的 angularjs 具有多选模式

Question

为令人困惑的标题道歉。所以我有 multi-select + ng-grid 工作 here .

对于不确定主/细节范式是什么的人。我从我的网格中选择一行并以某种方式公开它的所有属性，以便从我的网格中完整查看该行(主要在网格内，详细信息是对象属性)

我想让它做类似 的事情

但我似乎无法弄清楚如何获得这种类型的详细 View 。我想我需要有某种类型的 emit/broadcast/on 类型的事件集。所以问题又是如何在 angularjs + ng-grid 中使用模态和多项选择来进行主视图/详细 View ？

Answer 1

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

除此之外，就从 ng-grid 获取数据而言，您可以使用 afterSelectionChange 网格选项委托(delegate)给一个函数，该函数将在选择完成后触发已完成。

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>

希望对您有所帮助。如果我遗漏了什么，请告诉我。

编辑:

好的，我将 angular bootstrap 模态集成到 this plunker 中.

查看不带 ng-grid 的 Angular 引导模式的示例也可能有所帮助。你可以找到here in this modal plunker .