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

Question

I am having a problem populating a table using ng-repeat after a cellTemplate ng-click.

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

In this foo method I'm attempting to pass results to html page.

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

$scope.source is defined here.

   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>

Something tells me it's my results/source. What am i missing?

Here's plnkr

Search for Tim to initiate search.

My goal is to populate the table under NG Click Results with data shown in NG grid. I would like to show first name, last name, address, and phone under NG Click Results. I want the ng click to list out all the data associated with that row selected in the grid. For example: Click first row, show first row's data. Click second row, show second row data, etc.

Answer 1

So a couple things.

First in your cellTemplate you have the call to foo, but you weren't passing it anything to use as a reference to what row you clicked. I would suggest passing in the row object into foo, that way you can reference the data through row.entity.

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

Second in your js if you want to have a list of what rows have been clicked you probably want to initialize a list on $scope and then add/remove from that list when a user clicks, and ng-repeat on that list. In your current code ngClickResults just keeps getting assigned to a variable passed into 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];
  }
};

Lastly it seems that in your html the ng-repeat defines the variable ngClickResult but then you don't use it in the following td definitions. By not using the ng-repeat variable (ngClickResult) you would end up repeating the same object over and over for each item in the ngClickResults collection. Also in your td's you reference showNgClick's firstName and lastName properties, but those are defined as fname/lname in the json and first and last in your grid row objects.

<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>

I have made some of those changes into the following plunker. When you click on a row it should create a row in the table below the grid.

Please note I realized that there is a bug where the grid is not calling foo for every click so sometimes it will highlight a row and not add or remove the item from the map of selected rows.

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

Hope this helps!