为令人困惑的标题道歉。所以我在这里工作了 multi-select + ng-grid 。
对于任何不确定主/细节范式是什么的人。我从我的网格中选择一行并以某种方式公开它的所有属性,以便从我的网格中查看该行的完整视图(主在网格内,细节是对象属性)
我希望它做类似的事情
但我似乎无法弄清楚如何获得这种类型的细节视图。我想我需要有某种类型emit/broadcast/on
的事件集。所以问题再次是我如何在 angularjs + ng-grid 中使用模态和多项选择来进行主/详细视图?
为令人困惑的标题道歉。所以我在这里工作了 multi-select + ng-grid 。
对于任何不确定主/细节范式是什么的人。我从我的网格中选择一行并以某种方式公开它的所有属性,以便从我的网格中查看该行的完整视图(主在网格内,细节是对象属性)
我希望它做类似的事情
但我似乎无法弄清楚如何获得这种类型的细节视图。我想我需要有某种类型emit/broadcast/on
的事件集。所以问题再次是我如何在 angularjs + ng-grid 中使用模态和多项选择来进行主/详细视图?
我不确定你想如何创建模态,但有很多选择。一种是角度引导模态。
除此之外,在从 中获取数据方面ng-grid
,您可以使用afterSelectionChange
grid 选项委托给一个函数,该函数将在做出选择后触发。
你的 plunker 的这个 fork演示了使用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 modal 集成到这个 plunker中。
看一个没有ng-grid
. 你可以在这个 modal plunker中找到它。