问题
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
回答1:
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!!
回答2:
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
回答3:
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);
}
};
来源:https://stackoverflow.com/questions/16911156/how-to-get-the-cell-value-from-ng-grid