Login/Register
How to get the cell value from ng-grid
Asked Answered
Solved angularjsng-grid
T

3

5

I am a beginner of AngularJS. I study the demo of ng-grid and have a question.

index.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MyCtrl">
    <div class="gridStyle" ng-grid="gridOptions"></div>
    <div class="selectedItems">{{mySelections}}</div><br><br>

</body>

</html>

app.js

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.mySelections = [];
$scope.myData = [{name: "Moroni", id: 1},
                 {name: "Tiancum", id: 2},
                 {name: "Jacob", id: 3},
                 {name: "Nephi", id: 4},
                 {name: "Akon", id: 5},
                 {name: "Enos", id: 6}];
$scope.gridOptions = { 
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: true 
};

//$scope.mySelections_id = $scope.mySelections.length;

});

When I select the first row, the div of selectedItems will show [{"name":"Moroni","id":1}]. the result is OK. If I just want to get the value of cell [id] from selected row, how do I modify my code?

here is Plunker

Thorton answered 4/6, 2013 at 6:28 Comment(0)
A
0

Acutally, I want to get a cell value and modify when user selects the cell at the table.

Above answers are using fixed columns's filed.. like 

 $scope.selectedIDs.push( item.id ) // id is column filed

Instead of these answers, I found another way exactly what I want to achieve with.

Example code: http://plnkr.co/edit/wfiMhlJ7by4eUHojjKT4?p=preview

editableCellTemplate which is an option for columnDefs is used for solving this problem.

Angular is Aswome!!

Aparri answered 17/6, 2015 at 8:38 Comment(0)
C
5

Use the afterSelectionChange callback to extract the ids from the selection to an other array.

$scope.gridOptions = { 
    data: 'myData',
    selectedItems: $scope.mySelections,
    multiSelect: true,
    afterSelectionChange: function () {
      $scope.selectedIDs = [];
      angular.forEach($scope.mySelections, function ( item ) {
        $scope.selectedIDs.push( item.id )
      });
    }
  };

now you can reference {{selectedIDs}} from the template and has all the selected ids in it. Or just the first: {{selectedIDs[0]}}

See the working example here: http://plnkr.co/edit/xVwVWX

Chinn answered 4/6, 2013 at 8:26 Comment(2)
Hi Oliver. Your code is working fine. But if we se multiSelect: false so that the user can only click on one row, How to get the selected row? is there any property like selectedRow or selectedItem instaed of selectedItems?? because if we use selectedItems for multiSelect:false, our selected row will be added in $scope.mySelections array and if we want to access that item we have to write $scope.mySelections[0].name.. How to solve it ? – Sorites
I have no easier solution for you. Sorry. – Chinn
G
2

You can access the rowItem of the selected row with the arguments to the afterSelectionChange event. The entity property will have the id and name properties. 

 $scope.gridOptions = { 
    data: 'myData',
    selectedItems: $scope.mySelections,
    multiSelect: true,
    afterSelectionChange: function (theRow, evt) {      
       alert(theRow.entity.id);
}

};

Galliot answered 11/9, 2013 at 14:55 Comment(0)
A
0

Acutally, I want to get a cell value and modify when user selects the cell at the table.

Above answers are using fixed columns's filed.. like 

 $scope.selectedIDs.push( item.id ) // id is column filed

Instead of these answers, I found another way exactly what I want to achieve with.

Example code: http://plnkr.co/edit/wfiMhlJ7by4eUHojjKT4?p=preview

editableCellTemplate which is an option for columnDefs is used for solving this problem.

Angular is Aswome!!

Aparri answered 17/6, 2015 at 8:38 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.