如何将角度 ng-repeat 与 ng-grid 和 ng-click 一起使用？

Question

我在 cellTemplate ng-click 后使用 ng-repeat 填充表格时遇到问题。

 cellTemplate: '<div  ng-click="foo()" ng-bind="row.getProperty(col.field)"></div>'

在这个 foo 方法中，我试图将结果传递给 html 页面。

$scope.results = $scope.source;
          $scope.foo = function(ngClickResult) { 
            $scope.showNgClick = this.result;
            $scope.ngClickResults = ngClickResult;

$scope.source 在这里定义。

   angular.forEach($scope.items, function (item) {
                    if(item.fname === enteredValue.firstName ){
                        arrItem.push({
                            first: item.fname,
                            last: item.lname,
                            address: item.address,
                            phone: item.phone

                        });
                    }
                });
                $scope.source= arrItem;

html

 <tr data-ng-repeat="ngClickResult in ngClickResults">
 <td>First Name:{{showNgClick.firstName}}</td>
 <td>Last Name:{{showNgClick.lastName}}</td>
 <td>Address:{{showNgClick.address}}</td>
 <td>Phone:{{showNgClick.phone}}</td></tr>

有些东西告诉我这是我的结果/来源。我错过了什么？

这里是plnkr

搜索 Tim 以启动搜索。

我的目标是使用 NG 网格中显示的数据填充 NG Click Results 下的表格。我想在 NG Click Results 下显示名字、姓氏、地址和电话。我希望 ng 单击列出与在网格中选择的行关联的所有数据。例如：点击第一行，显示第一行的数据。点击第二行，显示第二行数据等

Answer 1

有几件事。

首先，在您的 cellTemplate 中，您调用了 foo，但您没有传递任何内容以用作对您单击的行的引用。我建议将行对象传入 foo，这样您就可以通过 row.entity 引用数据。

cellTemplate: '<div  ng-click="foo(row)" ng-bind="row.getProperty(col.field)"></div>'

如果您想要在您的 js 中获得点击了哪些行的列表，您可能希望在 $scope 上初始化一个列表，然后在用户点击时从该列表中添加/删除，然后在该列表上进行 ng-repeat .在您当前的代码中，ngClickResults 一直被分配给传递给 foo 的变量。

$scope.ngClickResults = {};

$scope.foo = function(row) {
  //check if row is already selected if it is unselect else add row
  if (!$scope.ngClickResults[row.rowIndex]) {
    $scope.ngClickResults[row.rowIndex] = row.entity;
  } else {
    delete $scope.ngClickResults[row.rowIndex];
  }
};

最后，似乎在您的 html 中，ng-repeat 定义了变量 ngClickResult，但是您没有在以下 td 定义中使用它。如果不使用 ng-repeat 变量 (ngClickResult)，您最终会为 ngClickResults 集合中的每个项目一遍又一遍地重复相同的对象。同样在您的 td 中，您引用 showNgClick 的 firstName 和 lastName 属性，但这些属性在 json 中定义为 fname/lname，在网格行对象中定义为 first 和 last。

<tr data-ng-repeat="(key, ngClickResult) in ngClickResults">

        <td>First Name:{{ngClickResult.first}}</td>

        <td>Last Name:{{ngClickResult.last}}</td>

        <td>Address:{{ngClickResult.address}}</td>

        <td>Phone:{{ngClickResult.phone}}</td>
</tr>

我已经对以下 plunker 进行了一些更改。当您单击一行时，它应该在网格下方的表格中创建一行。

请注意，我意识到有一个错误，即网格不会在每次点击时调用 foo，因此有时它会突出显示一行，而不是从所选行的地图中添加或删除项目。

http://plnkr.co/edit/27KeKdlPGkflBPMAdvID?p=preview

希望这会有所帮助！