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点击结果下的表格。我想在NG Click Results下显示名字，姓氏，地址和电话。我希望ng click能够列出与网格中选择的那一行相关的所有数据。例如：单击第一行，显示第一行的数据。单击第二行，显示第二行数据等

Answer 1

所以有几件事。

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

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

如果你想要列出已经点击的行列表，你可能想要在$ 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，在你的网格行对象中被定义为第一个和最后一个。

<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

希望这有帮助！

如何使用ng-grid和ng-click进行角度ng-repeat？

1 个答案: