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

Question

道歉令人困惑的标题.所以,我必须多选+ NG网工作在这里.

对于那些不确定主/细节范例是什么的人.我从网格中选择一行并以某种方式显示其所有属性,以便从我的网格中查看行的完整视图(主要在网格内部,详细信息是对象属性)

我想让它做类似的事情

但我似乎无法弄清楚如何让这种类型的细节视图发生.我认为我需要一些类型emit/broadcast/on的事件集.那么问题是如何在angularjs + ng-grid中使用模态和多个选项来执行主/详细视图？

Answer 1

我不确定你想要如何创建模态,但有很多选择.一个是角度引导模态.

除此之外,在获取数据方面ng-grid,您可以使用afterSelectionChangegrid选项委派给在选择完成后将触发的函数.

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

我希望这有帮助.如果我遗漏了一些东西,请告诉我.

编辑:

好吧,我将角度自举模式集成到这个plunker中.

它也可能有助于查看角度自举模态的示例ng-grid.你可以在这个模态的plunker中找到它.