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

Question

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

 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>

有些东西告诉我这是我的 results/source。我错过了什么？

这是plnkr

搜索 Tim 以启动搜索。

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

Answer 1

所以有几件事。

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

引用数据

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

在你的 js 中第二，如果你想要一个已被点击的行的列表，你可能想要在 $scope 上初始化一个列表，然后当用户点击时从该列表中 add/remove，并且 ng-重复该列表。在您当前的代码中，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 中。当您单击一行时，它应该在网格下方的 table 中创建一行。

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

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

希望对您有所帮助！

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

How to use angular ng-repeat with ng-grid and ng-click?

javascript

angularjs

angularjs-scope

angularjs-ng-repeat

angular-ngmodel