Angular JS - 一个控制器中的多个 ng-grid ：主/详细信息

【问题标题】：Angular JS - multiple ng-grid in one controller : Master /detailAngular JS - 一个控制器中的多个 ng-grid ：主/详细信息
【发布时间】：2014-04-28 12:30:41
【问题描述】：

我能找到的ng-grid Mater/Detail 的所有示例，例如http://angular-ui.github.io/ng-grid/ 的官方演示确实显示了主/详细信息，但是他们没有用两个 ng-grids 显示它.

我该怎么做？我什至不知道如何开始。看起来网格绑定到$scope.gridOptions 而$scope 绑定到控制器，所以我看不出如何在一个控制器中拥有两个 ng-grid。

这是否意味着我需要两个控制器（通过服务连接）？

【问题讨论】：

标签： angularjs master-detail ng-grid

【解决方案1】：

HTML

<body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="fooGridOptions"></div>
        <div class="gridStyle" ng-grid="barGridOptions"></div>
</body>

JS：

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.foo = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
    $scope.bar = [{name: "Moroni", age: 50},
                     {name: "Foo", age: 43},
                     {name: "Bar", age: 27},
                     {name: "FooBar", age: 29},
                     {name: "JohnJohn", age: 34}];
    $scope.fooGridOptions = { data: 'foo' };
    $scope.barGridOptions = { data: 'bar' };
});

ng-grid 查看使用指令 (ng-grid="myOptionsObject") 传递的任何对象。在这种情况下，我们只在对象上设置了“数据”属性，但其他选项可用。

【讨论】：