javascript - 如何将 Angular 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 点击结果下的表格。我想在“NG 点击结果”下显示名字、姓氏、地址和电话。我希望 ng 单击列出与网格中所选行关联的所有数据。例如:点击第一行，显示第一行的数据。点击第二行，显示第二行数据等

Answer 1

有几件事。

首先，在您的 cellTemplate 中，您调用了 foo，但您没有向其传递任何内容以用作对您单击的行的引用。我建议将 row 对象传递到 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，因此有时它会突出显示一行，而不是从所选行的 map 中添加或删除该项目。

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

希望这有帮助!