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
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.
};
Use the
afterSelectionChange
callback to extract the ids from the selection to an other array.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
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
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 forcolumnDefs
is used for solving this problem.Angular is Aswome!!